jquery - 将文本拖动到 PaperJS Canvas 上

Question

我正在尝试将包含一些文本的内容拖动到由 PaperJs 控制的 Canvas 上。使用 Jquery“droppable”，我可以通过 paperjs 将一些文本拖放到 Canvas 中，但我无法获取拖放位置的坐标/位置。有人可以帮忙吗？

$("#canvasVertical").droppable({
      drop: function (event, ui) {
          var text = new paper.PointText(new Point(??, ??));
          text.justification = 'center';
          text.fontSize = 12;
          text.fontcolor = "blue";
          text.content = "text form the div or span";
      }
 });

我尝试使用 event.target 或 event 或 ui 获取放置的位置，但无法正确获取放置的文本，以便在鼠标的位置呈现放置的文本。

有人可以帮忙吗？

Answer 1

没有一种简单的方法可以让 jQuery 或您的代码准确地知道用于实现您想要的最终结果的正确点。您遇到的第一个问题是纸张的坐标是相对于 Canvas 的左上角，而 jQuery 的鼠标位置与此不同 - 最接近的可能是 event.offsetX 和 event.offsetY，但这包括 Canvas 周围的任何填充，因此请考虑所有这些。如果您确保 Canvas 没有填充，那么 event.offset? 对于您的 Canvas 应该是正确的。

将事件点调整为纸张的 Canvas 坐标后，您可以复制纸张使用的逻辑，或者您可以让纸张完成其工作，然后调整 PointText 的位置，以便它就是你想要的地方。

我会采用第二种方法 - 这有点令人困惑，因为您在创建 PointText 时提供的点虽然用于文本的 x 轴起始点，但并不用于起始点y 轴上的点(不是边界矩形的 topLeft、bottomLeft 甚至 centerY)。

text.position 是边界矩形 text.bounds 的中心。

我能想到的最简单的过程是:

1. 使用paper.PointText创建文本
2. 设置文本的内容
3. 使用text.bounds或text.position重新调整位置

例如，如果您希望文本的中心位于放置点:

$("#canvasVertical").droppable({
  drop: function (event, ui) {
      // may need to convert event.offsetX, event.offsetY coordinates
      // to canvas coordinates.
      var pos = new paper.Point(event.offsetX, event.offsetY);
      // pos could really be anything here
      var text = new paper.PointText(pos);
      text.justification = 'center';
      text.fontSize = 12;
      text.fontcolor = "blue";
      text.content = "text form the div or span";
      // now use the adjusted drop point to set the center position
      // of text.
      text.position = pos;
  }
})

如果您希望放置点位于文本边界矩形的 topLeft、bottomLeft 或 centerY，则过程类似。您必须计算所需位置(放置点)和渲染位置之间的差异，然后使用该偏移量来调整位置，例如

// this replaces the text.position = pos line above
// and assumes that the drop point should be the bottomLeft
// position of text.
var delta = text.bounds.bottomLeft.subtract(pos);
text.position = text.position.add(delta);

将其调整为topLeft几乎是一样的。调整 centerY 的工作量稍微大一些，因为 centerY 不包含最左边的 X 值，该值必须与 text.bounds 分开。