Javascript KineticJs：如何缩放图像并保持连接容器的位置？

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

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.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});
})

在我使用

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

我得到以下信息：

红色矩形不再附着到图像

我可以

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

但这会改变矩形的大小

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

编辑：

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

---

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

---

矩形刻度（{x:0.5，y:0.5}）

如果要在缩放图像后将红色矩形居中于蓝色图像的左上角，则需要侦听图像

scaleX

和

scaleY

属性中的更改

您可以监听

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});
})

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

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});
})

下面是一个演示：

---

我不认为这会有什么不同。rect.scale（）会缩放我不想要的rect。你能描述一下你想要发生什么吗？如果要在保持相对位置的同时缩放图像和矩形，可以缩放它们都在其中的组。@markE我只想缩放图像（蓝色框）。缩放图像时，红色框应像以前一样连接到蓝色框。@markE请查看我的编辑。好的，谢谢您的澄清--我现在明白了…请查看我的答案以获得解决方案。干杯@马克，我评论了你的答案！但如果红色矩形是一个包含其他形状的组，该怎么办。我必须单独调整每个形状位置吗？问题是group.width（）为零。如果要在保持相对位置的同时缩放图像和矩形，可以将红色和蓝色放在一个组中并缩放该组。我不想缩放红色矩形。它应该只保持蓝色矩形上的位置。红色矩形位于仅包含红色矩形的组中。如何使用红色矩形组而不是红色矩形本身来解决问题？好的，如果希望红色组相对于缩放后的蓝色重新定位，则必须为红色组设置宽度和高度——没有其他选项。然后，您可以在我的答案中使用相同的代码——只需将rect替换为red group。干杯（1） 获取对任何画布元素的引用：var canvas=document.getElementById（“anyHtmlCanvas”）；（2） 将dynamic.image的image属性设置为该引用：var img=new dynamic.image（{image:canvas。。。