动态JS调整画布/图像大小
动态JS调整画布/图像大小
提问于 2013-09-09 18:48:34
当窗口使用JS/CSS调整大小时，我正在调整动态画布的大小，以按比例减少精灵。精灵绑定了click事件。
我的问题是，尽管精灵正确地调整了大小，但它们的单击区域仍然固定在原始的x/y坐标上。
似乎一旦Kinetic在屏幕上绘制了一个精灵，它就固定在它的初始x/y坐标上。
当我调整窗口大小时，有没有办法重绘子画面和它们的点击坐标？
回答 1
Stack Overflow用户
发布于 2013-09-10 02:23:57
KineticJS允许自定义命中区域。
您可以为您的新大小和新定位的精灵创建一个自定义的点击区域。
以下是一些未经测试的代码：
首先，向sprite添加一些定义其点击区域的属性：
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);
} 调整画布大小时，相应地更改精灵的hit属性：
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);
} 同样，这段代码是untested...tweaking可能需要的。
祝你的项目好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18696535
复制相关文章
相似问题
腾讯云开发者
