使用Kineticjs拖动和缩放文本 [英] Drag and zoom text with Kineticjs

问题描述

我正在尝试缩放和平移已经可拖动的文本.所有示例都在图像或形状上，似乎我无法使其适应文本对象.我的问题是:

I am trying to zoom and pan a text which is draggable already. All the examples are on images or shapes and it seems I cannot adapt it to a text object. My questions are:

1. 我是否必须使用锚点，还是使用Kineticjs缩放文本的更简单方法?

1. Do I have to use the anchors or is any simpler way zoom a text with Kineticjs?

我找到了一个有关缩放形状的示例，代码在此处崩溃:

I found an example regarding zooming a shape and the code crashes here:

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

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

Can we call a function while we are creating a layer? I usually create a layer and then add the outcome of the function in it. Any idea would be great, thanks.

推荐答案

我想到了很多方法可以做到这一点，但这是我最终实现的方法:

I thought of many ways you could do this but this is the one I ended up implementing: jsfiddle

基本上，您有一个锚点(不一定总是在那儿，您可以隐藏并显示它.如果需要帮助，请告诉我)，如果将锚点向下拖，它会增加fontSize，然后将锚点向上拖动会减小fontSize.

Basically, you have an anchor (which doesn't always have to be there, you can hide and show it if you would like. Let me know if you need help with that) and if you drag the anchor down it increases the fontSize, and if you drag the anchor up it decreases the fontSize.

我遵循了完全相同的锚定教程，但我添加了dragBoundFunc来限制拖动到Y轴:

I followed the exact same anchor tutorial but instead I added a dragBoundFunc to limit dragging to the Y-axis:

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的组中的单个锚点:

And then I updated the updateAnchor() function to only detect the single anchor I added to the group named 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;
}

与e.PageY相比，基本上使用

mY来查看鼠标是向上移动还是向下移动.一旦确定了鼠标方向，便可以决定是否应增大或减小fontSize！

Basically mY is used compared to the e.PageY to see if the mouse is moving up or down. Once we can determine the mouse direction, then we can decide if we should increase or decrease the fontSize!

或者，您可以使用鼠标滚轮执行完全相同的操作！我自己没有实现它，但是绝对可以实现.像这样:

Alternatively, you can use the mousewheel to do the exact same thing! I didn't implement it myself but it's definitely doable. Something like:

1. 鼠标滚轮向下并且fontSize减小
2. 向上移动鼠标滚轮，fontSize增大

1. Mousewheel down and the fontSize decreases
2. Mousewheel up and the fontSize increases

希望这可以为您模拟文本的缩放".而且我猜能够拖动文本就像平移"一样吗?

Hopefully this emulates "Zooming" a text for you. And I guess being able to drag the text acts as "panning" right?

更新(基于下面的评论)

这是使用dragBoundFunc限制向Y轴拖动的方式:

This is how you would limit dragging to the Y-Axis using dragBoundFunc:

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

请参阅更新的 jsfiddle (与上述jsfiddle相同)

See the updated jsfiddle (same jsfiddle as above)

这篇关于使用Kineticjs拖动和缩放文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！