Question

我在舞台上有不同的SHapes，我想在选中它们时将它们调整大小。

我想到将形状“转换”为一个组并为其添加缩放器。取消选择SHape后，我可以删除缩放器，然后从组中删除形状并将其添加回原来的父级。

我试过了，它并没有真正起作用，因为Shape的坐标原点发生了变化，如果它有一个dragBoundFunc则更糟。所以它似乎是很多工作而且感觉不对。我认为必须有一个更好的方法来处理可能广泛传播的事情。

所以我的问题是，动态添加缩放器到现有形状的最佳方法是什么，并且在不再选择形状时将其移除？

Answer 1

同意，调整“锚点”的大小在视觉上没有吸引力且代码复杂

向图像添加单独的缩放器视觉上很不方便

（o / s windows不会添加笨重的调整器以启用调整大小）。

添加单独的缩放器也变得非常复杂。

比喻说，你必须管理围绕你的太阳形状的单独的缩放器行星。

当形状受dragBoundFunc限制时管理这些卫星很复杂。

当旋转形状时管理这些卫星变得非常复杂，因为KineticJS使用偏移来定义旋转点。

替代方法：使用形状本身的边界框来管理调整大小。

在舞台上聆听鼠标事件。
当用户在形状的边框上进行mousedown时，请开始调整大小操作。
当用户拖动时，根据鼠标从与拖动侧相对的一侧拖动的距离来调整形状大小。

优点：

不需要锚点
在调整o / s窗口大小时，使用用户熟悉的相同调整大小方法
只涉及形状本身，因此不需要复杂的“卫星锚”管理。

以下是一个示例：http://jsfiddle.net/m1erickson/T4E9Y/

定义形状（此示例使用图像）。

kImage = new Kinetic.Image({
    image:img,
    x:10,
    y:10,
    width:img.width,
    height:img.height,
});
layer.add(kImage);
layer.draw();

将形状的边界区域保存为当前大小

在舞台上聆听mousedown事件。

当用户在形状边界框边框内进行隐藏时保存起始拖动位置

$(stage.getContent()).on('mousedown', function (event) {
    var pos=stage.getPointerPosition();
    var mouseX=parseInt(pos.x);
    var mouseY=parseInt(pos.y);
    var ipos=kImage.position();
    var isize=kImage.getSize();
    var right=ipos.x+isize.width;
    if(mouseX>right-10 && mouseX<right+10){
        startRight=mouseX;
        startWidth=isize.width;
        startHeight=isize.height;
    }
});

在舞台上收听mousemove事件。

根据从起始拖动位置拖动的距离缩放形状。

$(stage.getContent()).on('mousemove', function (event) {
    if(startRight>=0){
        var pos=stage.getPointerPosition();
        var mouseX=parseInt(pos.x);
        var mouseY=parseInt(pos.y);
        var dx=mouseX-startRight;
        var scaleFactor=(mouseX-(startRight-startWidth))/startWidth;
        kImage.width(startWidth*scaleFactor);
        kImage.height(startHeight*scaleFactor);
        layer.draw();
    }
});

在舞台上监听鼠标事件。

当用户释放鼠标

时结束拖动调整大小

$(stage.getContent()).on('mouseup', function (event) {
    startRight=-1;
});

从这里开始：

此示例从右边框激活缩放器。您可以类似地启用其他边框。

您可以通过更改mousedown中的目标来更改要调整大小的形状。

对于非常不规则的形状，当用户移动到该边界框时，您可以显示形状的边界框。然后让用户使用边界框边框调整大小。

当鼠标位于拖动边框时，您可以将所有类型的形状的边界框显示为突出显示。边界框成为用户的有用视觉。

将形状转换为组

1 个答案: