Kineticjs Group Image ziehen

Ich bin neu in Kinetic js und mit Problem, herauszufinden, wie das Bild zu stoppen außerhalb der Grenze bewegt, die dann einen weißen RaumKineticjs Group Image ziehen

Hier ist mein Code so weit

//photo layer 
var photoGroup = new Kinetic.Group({ x: layout.photoGroup.x, y: layout.photoGroup.y, draggable: true }); 

var Photolayer = new Kinetic.Layer(); 

var cropArea = new Kinetic.Rect({ 
    x: layout.cropAreaRect.x, 
    y: layout.cropAreaRect.y, 
    width: layout.cropAreaRect.width, 
    height: layout.cropAreaRect.height, 
    fill: "white", 
    listening: false 
}); 

Photolayer.add(cropArea); 
Photolayer.add(photoGroup); 

stage.add(Photolayer);

Quelle

2017-06-12 Kevin

Haben Sie versucht, 'dragBoundFunc' zu benutzen? – lavrton

@lavrton Ich bin mir aber nicht sicher, wie man die 'pos.x' und' pos.y' entscheidet? Hast du irgendwelche Vorschläge? – Kevin

schafft

Hier ist ein Arbeitscode-Snippet, das eine DragBoundFunc() darstellt.

Das Gold Rect ist der Bereich, in dem wir den Widerstand beschränken wollen. Das blaue Rechteck zeigt den Bereich, den wir berechnen - anders als das Gold, weil wir das Obenliegende des Ziehbaren als Grundlage für unsere Mathematik verwenden und wir müssen seine eigene Breite und Höhe angeben. Der rote Block könnte ein Bild oder ein Konvajs-Element sein.

Ziehen Sie den roten Block!

// add a stage 
 
var s = new Konva.Stage({ 
 
    container: 'container', 
 
    width: 800, 
 
    height: 600 
 
}); 
 

 
// add a layer   
 
var l = new Konva.Layer(); 
 
s.add(l); 
 

 
// Add a green rect to the LAYER just to show boundary of the stage. 
 
var green = new Konva.Rect({stroke: 'lime', width: 800, height: 600, x: 0, y: 0}); 
 
l.add(green); 
 

 

 
// Add a gold rect to the LAYER just to give some visual feedback on intended drag limits 
 
var gold = new Konva.Rect({stroke: 'gold', width: 400, height: 200, x: 55, y: 55}); 
 
l.add(gold); 
 

 

 
// Add a red rect to act as our draggable 
 
var red = new Konva.Rect({fill: 'red', stroke: 'red', width: 40, height: 50, x: 65, y: 65, draggable: true, 
 
     dragBoundFunc: function(pos) { 
 
     
 
        var newX = pos.x; 
 
        if (newX < minX){ newX = minX}; 
 
        if (newX > maxX){ newX = maxX}; 
 

 
        var newY = pos.y; 
 
        if (newY < minY){ newY = minY}; 
 
        if (newY > maxY){ newY = maxY}; 
 

 
        $("#info").html('Info: Pos=(' + newX + ', ' + newY + ') range X=' + minX + ' - ' + maxX + ' Y=' + minY + ' - ' + maxY); 
 
        
 
      return { 
 
       x: newX, 
 
       y: newY 
 
      } 
 
     } 
 

 
}); 
 
l.add(red); 
 

 

 
// calculate the drag boundary once for performance - we need to have the draggable element size for this ! 
 
var goldPos = gold.getAbsolutePosition() 
 
var minX = goldPos.x; 
 
var maxX = goldPos.x + gold.width() - red.width(); 
 
var minY = goldPos.y; 
 
var maxY = goldPos.y + gold.height() - red.height(); 
 

 

 
// Add a blue rect to the LAYER just show the computed drag limits - note the subtraction of the draggable element dimensions from maxX & Y. Note the 1px adjustment is to avoid overlapping the gold rect in the demo and is not required for live. 
 
var blue = new Konva.Rect({stroke: 'blue', opacity: 0.2, width: 399 - red.width(), height: 199 - red.height(), x: 56, y: 56}); 
 
l.add(blue); 
 

 
// bring red back to top so we can drag it 
 
red.moveToTop(); 
 

 
l.draw(); // redraw the layer it all sits on.

#container { 
 
    border: 1px solid #ccc; 
 
} 
 
#info { 
 
height: 20px; 
 
border-bottom: 1px solid #ccc; 
 
} 
 
#hint { 
 
font-style: italic; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js"></script> 
 

 

 
<body> 
 
<div id='hint'>Hint: green is stage, gold is intended drag limit, blue is computed drag limit.<br/>Drag the red block!</div> 
 

 
<div id='info'>Info:</div> 
 

 
    <div id="container"></div> 
 
</body>

Quelle

2017-06-15 21:08:34

half die Lösung viel. Vielen Dank – Kevin

Als Beispiel für dragBoundFunc:

const dragRect = new Konva.Rect({ 
    x: window.innerWidth/2 - 50, 
    y: window.innerHeight/2 - 50, 
    width: 100, 
    height: 100, 
    fill: 'green', 
    draggable: true, 
    dragBoundFunc: (pos) => { 
    const leftBound = cropRect.x(); 
    const rightBound = cropRect.x() + cropRect.width() - dragRect.width(); 
    pos.x = Math.max(leftBound, Math.min(rightBound, pos.x)); 

    const topBound = cropRect.y(); 
    const bottomBound = cropRect.y() + cropRect.height() - dragRect.height(); 
    pos.y = Math.max(topBound, Math.min(bottomBound, pos.y)); 
    return pos; 
    } 

});

Demo: http://jsbin.com/jilagadeqa/1/edit?js,output

Quelle

2017-06-16 03:11:31 lavrton

Kineticjs Group Image ziehen

Antwort

Verwandte Themen