在 KineticJs 中在后台拖动答案

【问题标题】：Drag while in background in KineticJs在 KineticJs 中在后台拖动
【发布时间】：2013-02-24 13:29:14
【问题描述】：

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

我已经尝试使用 .moveToBottom() 为背景组（后来添加到 backgroundLayer）绑定拖动事件，如下所示：

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

但没有结果。

【问题讨论】：

我听说拖放使用不同的层来表现。
我想该层对我来说是隐藏的，仅由系统用于拖动。但是，您认为有什么方法可以操纵它吗？

标签： javascript html canvas drag kineticjs

【解决方案1】：

您可以使用画布“.globalCompositeOperation”“在下方绘制”

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

您可以像这样将它应用到 KineticJs：

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();

【讨论】：