Kinetic.js旋转组对象的新子对象具有不正确的偏移
New children of a Kinetic.js rotated group object have incorrect offsets
我需要用户在圆中画一条线,然后旋转包括这些线的圆。然而,如果我用一个"组"来分组圆,然后画线,这些线就不会画在圆里。
在此之后,如果我移动组,则不会在圆中绘制线,而是在层上的其他位置绘制线。
如有任何帮助或建议,我们将不胜感激。感谢
工作副本:单击开始,然后单击圆圈旁边的两个红色圆圈以撤消按钮
微生物学游戏链接
这是代码:我首先点击获得x和y坐标,然后在鼠标移动时画一条线
petriDish.on("click", function(event) {
var item = new UndoObjects();
item.id= this.getId();
item.name = this.getName();
item.Xaxis = this.getX();
item.Yaxis = this.getY();
item.itemLayer = 'itemsLayer';
undoManager.push(item);
if(petridishGroup.getLayer().getName() == 'gamePlayLayer')
{
CanPerformStreaking();
petridishGroup.setDraggable(true);
gamePlayLayer.draw();
itemsLayer.draw();
document.body.style.cursor = "default";
x= event.layerX;
y= event.layerY;
startX = x;
startY = y;
// if click and were drawing then stop drawing
if(drawing)
{
drawing = false;
clearInterbal(mouseStopTimer);
}
else{
drawing = true;
MoveStopDetector();
}
}else
{
//this.setY(notificationLayer.getY()+120);
petridishGroup.moveTo(gamePlayLayer);
petriDish.setRadius(50);
itemsLayer.draw();
}
petriDish.draggable = false;
});
petriDish.on("mouseover mousemove", function(event) {
document.body.style.cursor = "pointer";
if(petridishGroup.getLayer().getName() != 'gamePlayLayer')
{
petriDish.setRadius(40);
itemsLayer.draw();
}
else{
if(drawing)
{
clearInterval(mouseStopTimer);
MoveStopDetector();
if(x >0 && y> 0 && drawing && allowStreaking)
{
var redLine = new Kinetic.Line({
points: [x,y, event.layerX, event.layerY],
stroke: "red",
strokeWidth: 3,
lineCap: "round",
lineJoin: "round"
});
x = event.layerX;
y = event.layerY;
petridishGroup.add(redLine);
petridishGroup.setDraggable(true);
petriDish.draggable=false;
gamePlayLayer.draw();
}
}
}
});
解决方案是将圆放置在组的左上角,这些坐标为0,0,这将是圆的中心。
此外,在鼠标移动时绘制线时,获取鼠标相对于层的坐标,然后从鼠标坐标中减去组的位置,这将给出x和y点相对于组。
var newX = event.layerX - group.getX();
var newY = event.layerY - group.getY();
newX和newY是相对于组坐标0,0 的点
相关文章:
- 为什么不是't此对象解析正确
- 重复对象中的Array.push(),不正确或无法理解
- 错误:'这'对象不正确;在JQuery中单击事件-单击时的意外行为
- Kinetic.js旋转组对象的新子对象具有不正确的偏移
- 使用此 javascript 在 IE7 中收到“对象不支持此属性或方法”错误,以及选项卡未正确定位的问题
- 猫鼬 + lodash 扩展对象复制数组不正确
- 主干集合的模型对象结构不正确
- Javascript Date 对象不正确的日期
- Ajax - Spring 发送 javascript 对象并接受为自定义对象.客户端发送的请求在语法上不正确
- Concat 对象不起作用,或者我需要将值转换为正确的格式
- json对象内部的json处理不正确
- 比较两个对象不会得到正确的结果
- 将套接字存储为键会产生不正确的值Javascript对象.里面的例子
- Javascript控制台日志报告对象属性不正确
- 传递手动创建的RegExp对象时,String.match返回不正确
- 表单数据中的对象处理不正确
- FancyTree:节点对象在拖动到根级别时不正确
- Cheerio:SyntaxError:属性选择器格式不正确:对象全局
- JSON.stringfy(对象)不正确
- js导入对象不正确的阴影渲染