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

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

祝你的项目好运！

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

1 个答案: