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

我正在开发一个图像注释器，它利用

paper.js

PointText

对象作为图像注释器的一部分。我们正在研究的一件事是允许用户使用不同的颜色和字体大小突出显示给定

PointText

对象文本的不同部分

我在

paper.js

网站上看到了

Gradient

选项，但如果它一开始就可以工作的话，那感觉更像是一种黑客行为。然后，我必须让它正确地显示在用于编辑

点文本的
文本区域中，这听起来更令人讨厌；我想要一个更干净的解决方案

任何解决方案都必须允许在画布的边界内拖动文本

我没有任何代码可以显示，因为我还没有找到任何可以尝试的东西，但我想看看SO社区是否知道任何可能的解决方案。
我认为文本工具仍在Paper.js*中开发，所以我想如果你想坚持Paper.js，你必须按照你的建议创建一点文本或使用渐变

我认为你应该考虑将文本覆盖在画布的顶部，并用CSS处理样式。例如：
html:

css:

*

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

编辑

然后，您可以使用或将彩色文本转换为图像，并将其粘贴到paper.js画布的正确位置。（您可以使用将图像导入paper.js）
我可以了解更多关于将文本叠加到画布上的信息吗？文本也需要是可拖动的。@arthur.sw-我不久前在一张图片上做了文本注释，并采用了您建议的方法。使用HTML文本工作得很好，并提供了全方位的功能。这看起来像是很好的代码。对我来说，最后一步是用画布上的所有注释创建一个图像，这意味着将使用上述代码生成的文本插入正在保存的新图像中。那有多可能？HTML将如何被画布压平？哼。。。这并不是一件小事，但您应该查看或将彩色文本转换为图像，以便粘贴到paper.js画布的正确位置。我会在回答中加上这个。
<canvas id="PaperCanvas"></canvas>
<div id="container">
  <div id="text" contenteditable='true'>
    Your text
  </div>
</div>

  ### ... 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

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;
}