在KineticJs的背景中拖动 [英] Drag while in background in KineticJs

问题描述

我有两个层，通常代表一个大背景和一些内容。
我已经使背景可拖动但是在拖动时它覆盖了另一层的内容。
是否可以在拖动时将其保留在后台？

I have two layers generally representing a large background and some content on top of it. I have made the background draggable but when dragged, it covers the content of the other layer. Is it possible to keep it in the background while dragging it?

我尝试将拖拽事件与.moveToBottom（）绑定为后台组（稍后像这样添加到backgroundLayer中：

I have tried binding the drag events with .moveToBottom() for the background group (later added to backgroundLayer) like that:

groupBackground.on('dragstart',function(){
    groupBackground.moveToBottom();
});
groupBackground.on('dragmove',function(){
     groupBackground.moveToBottom();
});
groupBackground.on('dragend',function(){
     groupBackground.moveToBottom();
});

但没有结果。

推荐答案

您可以使用画布.globalCompositeOperation

这将允许您的用户拖动前景下的背景。

This will allow your user to drag the background under the foreground.

您可以将它应用于KineticJs，如下所示：

And you can apply it to KineticJs like this:

layer.getContext().globalCompositeOperation = "destination-over";

这是代码和小提琴： http://jsfiddle.net/m1erickson/2GFSE/

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});

var layer = new Kinetic.Layer();
stage.add(layer);
var background = new Kinetic.Rect({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    width: 250,
    height: 250,
    fill: 'black',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
});

var foreground = new Kinetic.Ellipse({
    x: stage.getWidth() / 3,
    y: stage.getHeight() / 3,
    radius: {
        x: 50,
        y: 30
    },
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
});

// add the background and foreground to the layer
layer.add(foreground);
layer.draw();
layer.getContext().globalCompositeOperation = "destination-over";

layer.add(background);
layer.draw();

这篇关于在KineticJs的背景中拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！