KineticJs에서 백그라운드로 드래그

Question

두 개의 레이어가 일반적으로 큰 배경과 그 위에 일부 콘텐츠를 나타냅니다. 배경을 드래그 가능하게 만들었지 만 드래그하면 다른 레이어의 내용을 덮습니다. 드래그하는 동안 백그라운드에서 유지할 수 있습니까? 나는 그런 (나중에 backgroundLayer에 추가) 배경 그룹 .moveToBottom로 드래그 이벤트를() 바인딩 시도

:

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

하지만 결과에

.

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