是否可以创建具有多种颜色和字体大小的paper.js PointText对象？ [英] Is it possible to create a paper.js PointText object with multiple colors and font sizes?

问题描述

我正在开发一个图像注释器，它使用 paper.js PointText 部分对象。我们正在研究的一件事是允许用户使用不同的颜色和字体大小突出显示给定 PointText 对象文本的不同部分。

I'm working on an image annotator that utilizes paper.js PointText objects for part of it. One thing we're looking into is allowing the user to highlight different parts of the text of a given PointText object with different colors and font sizes.

我在 paper.js 网站上看到了 Gradient 选项，但这会让我觉得就像更多的黑客工作，假设它会起作用。然后我必须让它在用于编辑 PointText 的 textarea 中正确显示，这听起来更加hacky ;我想要一个更清洁的解决方案。

I saw the Gradient option on the paper.js website, but that would feel like more of a hack to get working, assuming it would work in the first place. Then I would have to get it to display properly in the textarea used for editing the PointText, which sounds even more hacky; I would like a cleaner solution.

任何解决方案都必须允许文本在画布的范围内可拖动。

Any solutions must allow the text to be draggable within the bounds of the canvas.

我没有任何代码可以显示，因为我没有找到任何可以尝试的东西，但我想知道SO社区是否知道任何可能的解决方案。

I don't have any code to show because I haven't found anything to try, but I wanted to see if the SO community is aware of any possible solutions.

推荐答案

我认为Paper.js *中的文本工具仍在开发中，所以我猜你必须按颜色创建一个PointText，或者如你想坚持使用渐变Paper.js。

I think text tools are still in development in Paper.js*, so I guess you have to create one PointText by color or use gradients as you suggested if you want to stick with Paper.js.

在我看来，你应该考虑在画布上叠加文本并用CSS处理样式。 这里就是一个例子：

In my opinion you should really consider overlaying text on top of the canvas and handle styles with CSS. Here is an example:

html ：

<canvas id="PaperCanvas"></canvas>
<div id="container">
  <div id="text" contenteditable='true'>
    Your text
  </div>
</div>

coffeescript：

coffeescript:

  ### ... some paper.js code ...
  # drag & drop:
  $('#container').mousedown (event)->
    if event.target.id != "container"
      return
    global.drag = true
    global.delta = new Point( $('#container').offset().left  - event.pageX, $('#container').offset().top - event.pageY)
    $("#text").addClass("noselect")
    return

  $("html").mousemove (event)->
    if global.drag
      $('#container').css( left: event.pageX + global.delta.x, top: event.pageY + global.delta.y)
    return

  $("html").mouseup (event)->
    global.drag = false
    $("#text").removeClass("noselect")
    return

css：

canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

#container {
  position: absolute;
  top: 50px;
  left: 50px;
  padding: 20px;
  border: 1px solid black;
  background-color: 'red';
}
#text {
  padding: 20px;
  background-color: 'white';
  border: 1px solid black;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

* http://paperjs.org/reference/textitem/

TextItem类型允许您创建排版。它的功能由不同的文本项类型继承，如PointText和AreaText（即将推出）。

The TextItem type allows you to create typography. Its functionality is inherited by different text item types such as PointText, and AreaText (coming soon).

编辑

然后您可以使用 html-to -canvas 或 rasterizeHTML.js 将您的彩色文本转换为您的图像可以粘贴到paper.js画布上的正确位置。 （您可以使用光栅将图像导入paper.js）

You can then use html-to-canvas or rasterizeHTML.js to convert your colored text into an image that you can paste onto the paper.js canvas at the correct location. (You can use Raster to import your image into paper.js)

这篇关于是否可以创建具有多种颜色和字体大小的paper.js PointText对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！