Pixijs将元素附加到另一个元素
Pixijs attach element to another
我正在开发一个工具,将各种精灵添加到舞台上。当我拖动一个元素时,我想显示一个需要相应移动到拖动项目的边界框(矩形)。
为了处理拖动功能,我使用了一个名为draggable 的库
这是我在舞台上推动的每一个对象的构造函数:
function createElement(x, y, ass_id)
{
// create our little bunny friend..
bunny = new PIXI.Sprite(textures[ass_id]);
bunny.scale.x = bunny.scale.y = 0.2;
bunny.draggable({
snap: true,
snapTolerance:0,
grid: [ 50, 50 ],
alpha: 0.5,
mousedown: function(data) {
/*var fishBounds = new PIXI.Rectangle(
-fishBoundsPadding,
-fishBoundsPadding,
viewWidth + fishBoundsPadding * 2,
viewHeight + fishBoundsPadding * 2);*/
texture_w = (data.target.texture.width) * data.target.scale.x;
texture_h = (data.target.texture.height) * data.target.scale.y;
// scale = data.target.scale.x;
var box = new PIXI.Graphics();
box.lineStyle(2, 0x666666);
box.drawRect(data.target.position.x, data.target.position.y, texture_w, texture_h);
box.scale.x = box.scale.y = scale;
stage.addChild(box);
data.target.boundingBox = box;
console.log(data.target.boundingBox.position, data.target.position);
},
drag: function(data) {
offset_x = data.boundingBox.position.x;//data.position;
offset_y = data.boundingBox.position.y;
data.boundingBox.position.x = data.position.x;// * data.scale.x;// - offset_x;
data.boundingBox.position.y = data.position.y;// * data.scale.y;// - offset_y;
console.log(stage.children.length , data.boundingBox.position, data.position, data);
},
mouseup: function(data) {
console.log("drop");
stage.removeChild(data.target.boundingBox);
}
});
// move the sprite to its designated position
bunny.position.x = x;
bunny.position.y = y;
elements.push(bunny);
// add it to the stage
stage.addChild(elements[elements.length-1]);
}
现在,这就像一个魅力:当我单击元素时,会在正确的位置创建一个边界框,问题是当我开始在边界框周围拖动它时,会远离项目。我认为这可能是因为一个项目被缩放了,而另一个项目没有,但由于我是pixi的一个小人物,我真的发现自己被它卡住了。
好吧,我发现你可以通过addChild轻松方便地将一个对象附加到另一个对象上,所以它是这样的:
function createElement(x, y, ass_id)
{
// create our little bunny friend..
bunny = new PIXI.Sprite(textures[ass_id]);
bunny.scale.x = bunny.scale.y = 0.2;
bunny.draggable({
snap: true,
snapTolerance:0,
grid: [ 50, 50 ],
alpha: 0.5,
mousedown: function(data) {
texture_w = (data.target.texture.width);
texture_h = (data.target.texture.height);
var box = new PIXI.Graphics();
box.lineStyle(5, 0x666666);
box.drawRect(0, 0, texture_w, texture_h);
data.target.type = "element";
data.target.addChild(box);
},
drag: function(data) {
},
mouseup: function(data) {
console.log("drop");
for (var i = stage.children.length - 1; i >= 0; i--) {
if((stage.children[i].type) && (stage.children[i].type == "element"))
for (var j = stage.children[i].length - 1; i >= 0; i--) {
console.log('remove boundingBox child here when needed');
}
};
}
});
// move the sprite to its designated position
bunny.position.x = x;
bunny.position.y = y;
elements.push(bunny);
// add it to the stage
stage.addChild(elements[elements.length-1]);
}
相关文章:
- 使用clickToggle并在单击另一个元素时关闭元素
- 按我自己的类克隆另一个元素的内容和顺序
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- 使用svg和javascript将一个类的元素动画化为另一个类
- 将html元素插入到文本字符串中,以匹配另一个html字符串
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- jquery从另一个元素中移除移除
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 使用数据属性将HTML数据复制到另一个元素
- 如何从另一个带下划线的数组中筛选带元素的数组
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- 在类JavaScript选择的另一个元素中选择一个标记元素
- 只要存在,就用另一个元素替换一个元素
- 检查一个元素是否有一个类与另一个类总是返回true
- 初学者反应查询(如何删除一个元素并附加另一个元素)
- 将jquery ui窗口的父元素设置为另一个元素
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- Pixijs将元素附加到另一个元素
- 将SVG元素拖动到另一个SVG元素上
- JavaScript:将输入范围行为链接到另一个元素