在PaperJS画布上拖动文本

Question

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

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

将事件点调整到纸张的画布坐标后，可以复制纸张使用的逻辑，或者只需让纸张完成其工作，然后调整PointText的位置，使其位于您想要的位置。

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

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

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

使用paper.PointText

• set text

• use 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。