Question

我正在尝试缩放和平移已经拖动的文本。所有的例子都在图像或形状上，似乎我不能将它改编成文本对象。我的问题是：

我是否必须使用锚点或使用Kineticjs缩放文本？

我找到了一个关于缩放形状的示例，代码崩溃在这里：

  var layer = new Kinetic.Layer({
     drawFunc : drawTriangle  //drawTriangle is a function defined already
  });

我们在创建图层时可以调用函数吗？我通常创建一个图层，然后在其中添加函数的结果。任何想法都会很棒，谢谢。

Answer 1

我想到了很多方法可以做到这一点，但这是我最终实施的方式：jsfiddle

基本上，你有一个锚（它不一定要在那里，如果你愿意，你可以隐藏和显示它。如果你需要帮助，请告诉我）如果你拖下锚，它会增加fontSize，如果您向上拖动锚点，则会减少fontSize。

我跟着完全相同的anchor tutorial，但我添加了dragBoundFunc来限制拖动到Y轴：

var anchor = new Kinetic.Circle({
    x: x,
    y: y,
    stroke: '#666',
    fill: '#ddd',
    strokeWidth: 2,
    radius: 8,
    name: name,
    draggable: true,
    dragOnTop: false,
    dragBoundFunc: function (pos) {
        return {
            x: this.getAbsolutePosition().x,
            y: pos.y
        };
    }
});

然后我更新了updateAnchor()函数，只检测我添加到名为sizeAnchor的组中的单个锚：

var mY = 0;

function update(activeAnchor, event) {
  var group = activeAnchor.getParent();
  var sizeAnchor = group.get('.sizeAnchor')[0];
  var text = group.get('.text')[0];

  if (event.pageY < mY) {
    text.setFontSize(text.getFontSize()-1);
  } else {
    text.setFontSize(text.getFontSize()+1);
  }

  sizeAnchor.setPosition(-10, 0);

  mY = event.pageY;
}

与mY相比，基本上使用e.PageY来查看鼠标是向上还是向下移动。一旦我们确定了鼠标方向，我们就可以决定是否应该增加或减少fontSize！

或者，你可以使用鼠标滚轮做同样的事情！我自己没有实现它，但它绝对可行。类似的东西：

鼠标滚轮向下，fontSize减少
鼠标滚轮向上，fontSize增加

希望这可以为您模拟“缩放”文本。我想能够拖动文本就像“平移”一样吗？

更新（根据以下评论）

这是使用dragBoundFunc限制拖动到Y轴的方法：

var textGroup = new Kinetic.Group({
    x: 100,
    y: 100,
    draggable: true,
    dragBoundFunc: function (pos) {
        return {
            x: this.getAbsolutePosition().x,
            y: pos.y
        };
    }
});

查看更新的jsfiddle（与上面相同的jsfiddle）

使用Kineticjs拖动和缩放文本

1 个答案: