Question

我正在开发一种工具来向舞台添加各种精灵。当我拖动一个元素时，我想显示需要相应移动到拖动项目的边界框（矩形）。

要处理拖动功能，我正在使用名为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的一个菜鸟，我真的发现自己陷入了困境。

Answer 1

好的，我发现你可以通过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]);
}

Pixijs将元素附加到另一个元素

1 个答案: