Canvas 动态调整画布/图像的大小

当窗口使用JS/CSS调整大小以按比例减少精灵时，我正在调整动态画布的大小。精灵具有绑定到它们的单击事件

我的问题是，当精灵正确调整大小时，它们的单击区域仍然固定在原始x/y坐标上

似乎一旦动能将精灵绘制到屏幕上，它就会固定到初始x/y坐标

---

当我调整窗口大小时，有没有办法重新绘制精灵及其单击坐标

KineticJS允许自定义命中区域。

您可以为新大小和新定位的精灵创建自定义命中区域

以下是一些未经测试的代码：

首先，向精灵添加一些属性，以定义其命中区域：

sprite1.hitX=sprite1.x;
sprite1.hitY=sprite1.y;
sprite1.hitWidth=30;
sprite1.hitHeight=30;

然后为精灵定义自定义命中区域函数：

drawHitFunc: function(canvas) {
  var context = canvas.getContext();
  context.beginPath();
  context.rect(this.hitX,this.hitY,this.hitWidth,this.hitHeight);
  canvas.fillStroke(this);
}        

调整画布大小时，相应地更改精灵的命中属性：

function resizeSpriteHitRegion(sprite,scalingFactor){
    sprite.hitX*=scalingFactor;
    sprite.hitY*=scalingFactor;
    sprite.hitWidth*=scalingFactor;
    sprite.hitHeight*=scalingFactor;
}

例如，将画布大小调整为原始大小的50%时：

resizeSpriteHitRegion(sprite1,0.50);

这是组合在一起时可能出现的情况：

var sprite1 = new Kinetic.Sprite({
  x: 50,
  y: 50,
  image: theSun,
  animation: 'idle',
  animations: animations,
  frameRate: 5,
  index: 0
});
sprite1.hitX=sprite.x;
sprite1.hitY=sprite.y;
sprite1.hitWidth=30;
sprite1.hitHeight=30;
drawHitFunc: function(canvas) {
  var context = canvas.getContext();
  context.beginPath();
  context.rect(this.hitX,this.hitY,this.hitWidth,this.hitHeight);
  canvas.fillStroke(this);
}        

同样，此代码未经测试…可能需要调整

---

祝你的项目好运

我们可以看看你的KineticJS代码和你的调整大小代码吗？