Question

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

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

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

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

Answer 1

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

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

HTML：

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

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（即将推出）。

修改

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

是否可以创建具有多种颜色和字体大小的paper.js PointText对象？

1 个答案: