canvas - Kinetic JS 调整画布/图像的大小

Question

当窗口使用 JS/CSS 调整大小以按比例减少精灵时，我正在调整 Kinetic 画布的大小。精灵绑定了点击事件。

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

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

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

Answer 1

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

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

祝你的项目好运！