Question

我正在尝试将包含一些文本的文本拖到由PaperJs控制的Canvas中。使用Jquery“droppable”我可以通过paperjs将一些文本放入画布中，但是我无法获得右下角的coördinates/ position。有人可以帮忙吗？

$("#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来获取drop的位置，但无法正确使用，因此删除的文本会在鼠标位置呈现。

任何人都可以提供帮助吗？

Answer 1

jQuery或您的代码没有一种直接的方法可以确切地知道用于实现所需最终结果的正确点。你遇到的第一个问题是纸张的坐标是相对于画布的左上角而jQuery的鼠标位置是不同的 - 最接近的可能是event.offsetX和event.offsetY，但这包括任何填充画布，所以考虑到所有这些。如果确保画布没有填充，则event.offset?对于画布应该是正确的。

将事件点调整为纸张的画布坐标后，您可以复制逻辑纸张使用，或者您可以让纸张完成它的工作，然后调整PointText的位置，这样就可以了想要它。

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

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

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

使用text

paper.PointText

设置text
使用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不包含必须与text.bounds分开的最左边的X值。

在PaperJS画布上拖动文本

1 个答案: