KineticJs：如何缩放图像并保持附加容器的位置？

Question

我有一个图像（蓝色框）和广告红色矩形。图像的偏移设置为图像的中心，以围绕图像的中心旋转。代码类似于以下内容：

var image = new Kinetic.Image({
x: 200,
y: 100
});
image.offsetX(100);
image.offsetY(50);

var rect = new Kinetic.Rect();

var group = new Kinetic.Group();

group.add(image);
group.add(rect);
layer.add(group);
stage.add(layer);

舞台看起来不像这样：

使用

重新缩放图像后

image.scaleX(0.5);
image.scaleY(0.5);

我得到以下内容：

红色矩形不再附加到图像上。

我能做到

rect.scaleX(0.5);
rect.scaleY(0.5);

但这会改变矩形的大小。

如何重新缩放图像并将矩形保持在与以前相同的位置？

编辑：

下图显示了图像缩放后的外观。缩放后的事件红色矩形应附加到图像上。

Answer 1

如果您希望在缩放图像后红色矩形在蓝色图像的左上角居中，则需要监听图像scaleX和scaleY属性中的更改。 / p>

您可以像这样收听scaleX / scaleY属性更改：

image.on("scaleXChange scaleYChange",function(){
    // either scaleX or scaleY has changed on this image
});

然后你可以将矩形重新定位在左上角的图像中心，如下所示：

image.on("scaleXChange scaleYChange",function(){
    var imgX=this.x()-this.offsetX()*this.scaleX();
    var imgY=this.y()-this.offsetY()*this.scaleY();
    rect.position({x:imgX-rect.width()/2,y:imgY-rect.height()/2});
})

这是一个演示：http://jsfiddle.net/m1erickson/6H9aK/

Answer 2

这样做是为了同时对x轴和y轴应用缩放，而不是先缩放一个，然后另一个缩放：

rect.scale（{X：0.5，Y：0.5}）;