Jquery 在PaperJS画布上拖动文本

我正在尝试将包含一些文本的文件拖到由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获取放置的位置，但无法正确获取，因此放置的文本在鼠标位置呈现

---

任何人都可以提供帮助？

对于jQuery或您的代码来说，没有一种简单的方法可以准确地知道要使用哪一点来实现所需的最终结果。您遇到的第一个问题是，纸张的坐标相对于画布的左上角，而jQuery的鼠标位置与此不同-最接近的可能是

event.offsetX

和

event.offsetY

，但这包括画布周围的任何填充，所以要考虑所有这些。如果您确保画布没有填充，则

事件.偏移量？

应该适合您的画布

将事件点调整为图纸的画布坐标后，可以复制图纸使用的逻辑，也可以让图纸完成工作，然后调整

点文本的位置，使其位于所需位置

我将采用第二种方法-这有点令人困惑，因为创建
点文本时提供的点用于文本的x轴起点，而不是y轴上的起点（不是
左上
，
左下
，甚至是边界矩形的
中心
）

text.position
是边框
text.bounds
的中心

我能想到的最直接的过程是：

使用
纸张创建
文本
。点文本
设置
文本的内容
使用
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;
  }
})

如果希望放置点是文本边框的
左上
、
左下
或
中间
，则此过程类似。必须计算所需位置（放置点）与渲染位置之间的差值，然后使用该偏移调整位置，例如

// 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);

将其调整为左上
几乎相同。调整
centerY
的工作量稍大一些，因为
centerY
不包括必须与
text.bounds
分开的最左边的X值