Konva JS. Bildposition ändern, drehen

Question

Ich füge ein Bild hinzu.

circle = new Image(); 
circle.src = '/img/logo.png'; 
circle.onload = function() { 
    anyimage = new Konva.Image ({ 
      x: 150, 
      y: 150, 
      image: circle, 
      width: 106, 
      height: 118 
    }); 
    layer.add (anyimage); 
    stage.add (layer); 
}; 

Wie erhalten und ändern Sie die Position und den Winkel dieses Bildes? Wie Sie diese Einstellungen später ändern können. Nach Ereignissen. Zum Beispiel, klicken Sie auf die Schaltflächen. Methode this.setX(), this.rotare(), this.x = funktioniert nicht für image obj.

Answer 1

Die Position und Größe entsprechen denen, die Sie im neuen Konva.Image() - Aufruf festgelegt haben. Die Rotation wird in this example und unten im Arbeitsausschnitt demonstriert. Grundsätzlich gibt es einen Rotationspunkt, der durch die Eigenschaft 'offset' der Form festgelegt wird. Standardmäßig befindet sich dies oben links im Bildrechteck. Sie wenden die Funktion rotate() der Form an, indem Sie den einzelnen Parameter auf die Gradzahl einstellen, um die gedreht werden soll, wobei die Drehung um die Position der Formenversetzung (x, y) erfolgt.

Siehe Ausschnitt unten für einen Laufstall.

Hinweis: Ich habe eine Frage mit dem Autor über das scheinbar unerwartete Verhalten aufgeworfen, das heißt, wenn Sie die Offset-Position ändern, um das Rotationszentrum zu ändern, wird die Form physisch verschoben.

// Add a stage for the shapes 
 
var stage = new Konva.Stage({ 
 
     container: 'container', 
 
     width: 1600, 
 
     height: 400 
 
    }); 
 

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

 
// add a rect to demonstrate rotation 
 
var r = new Konva.Rect({ 
 
     x: 60, 
 
     y: 30, 
 
     width: 50, 
 
     height: 50, 
 
     fill: 'red', 
 
     opacity: 0.5, 
 
     strokeWidth: 0}) 
 
layer.add(r); 
 

 
// add a spot to mark the rotate pt 
 
var c = new Konva.Circle({ 
 
     x: 45, 
 
     y: 45, 
 
     radius: 4, 
 
     fill: 'red', 
 
     stroke: 'black', 
 
     strokeWidth: 4}) 
 
layer.add(c); 
 
stage.draw(); 
 

 
// event for plus & minus buttons 
 
$('#plus').on('click', function(evt){ 
 
    evt.preventDefault() 
 
    r.rotate(10) 
 
    stage.draw(); 
 
}) 
 

 
$('#minus').on('click', function(evt){ 
 
    evt.preventDefault() 
 
    r.rotate(-10) 
 
    stage.draw(); 
 
}) 
 

 
// function to set rotate point and shape 
 
function setPos(pos){ 
 

 
    r.setAttr('offsetX', pos.x); 
 
    r.setAttr('offsetY', pos.y); 
 
    c.position({ 
 
     x: r.x(), 
 
     y: r.y() 
 
    }); 
 
    c.moveToTop(); 
 
    sayPos(); 
 
     stage.draw(); 
 
}  
 

 

 
$('#ctr').on('click', function(evt){ 
 
    evt.preventDefault() 
 
    setPos({x:25, y:25}); 
 
}) 
 

 
$('#topLeft').on('click', function(evt){ 
 
    evt.preventDefault() 
 
    setPos({x:0, y:0}); 
 
}) 
 

 
$('#topRight').on('click', function(evt){ 
 
    evt.preventDefault() 
 
    setPos({x:50, y:0}); 
 
}) 
 

 
$('#botCtr').on('click', function(evt){ 
 
    evt.preventDefault() 
 
    setPos({x:25, y:50}); 
 
}) 
 

 

 
function sayPos(){ 
 
    $('#info').html('Rotate pt=' + r.offsetX() + ", " + r.offsetY()); 
 
} 
 

 
// call the setPos() and sayPos() funcs on load. 
 
setPos({x:0, y:0}); 
 
sayPos();

p 
 
{ 
 
    padding: 4px; 
 
    
 
} 
 
#container 
 
{ 
 
    background-color: silver; 
 
    overflow: hidden; 
 
} 
 
div 
 
{ 
 
padding: 4px; 
 
}

<div id='info1'></div> 
 
<div id='info2'></div> 
 

 
<div>Click row 1 buttons to set rotate pt and row 2 buttons to rotate by 10 degrees</div> 
 
<div> 
 
    <button id='topLeft'>Move rotate pt to top left</button> 
 
    <button id='ctr'>Move rotate pt to center</button> 
 
    <button id='topRight'>Move rotate pt to top right</button> 
 
    <button id='botCtr'>Move rotate pt to bottom center</button> 
 
</div> 
 
<div> 
 
    <button id='plus'>+10</button> 
 
    <button id='minus'>-10</button> 
 
    <span id='info'>Info:</span> 
 
</div> 
 
    <div id="container"></div> 
 
      
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script> 
 
    <script type="text/javascript" src="test.js"></script>

Answer 2

Lösung. Benötigen Sie anyimage obj. Nicht umkreisen.

<script src="https://cdn.rawgit.com/konvajs/konva/1.3.0/konva.js"></script> 
<button onclick='rotate_image()'>rotate_image</button> 
<button onclick='setPos_image()'>rotsetPos_imageate_image</button> 
<div id="container"></div> 

var stage = new Konva.Stage({ 
        container: 'container', // индификатор div контейнера 
        width: 500, 
        height: 500 
      }); 

      var layer = new Konva.Layer(); 

      circle = new Image(); 
      circle.src = 'https://im0-tub-ru.yandex.net/i?id=caa07f7c7eb5b2788719c85cd6028d23&n=13'; 
      circle.onload = function() { 
       anyimage = new Konva.Image({ 
       x: 10, 
       y: 10, 
       image: circle, 
       width: 106, 
       height: 118 
       }); 

       layer.add(anyimage); 
       stage.add(layer); 
      }; 

function rotate_image(){ 
    anyimage.rotate(45); 
       stage.draw(); 
       console.log('loaded'); 
} 

function setPos_image(){ 
//code for change x,y coord of 'circle' obj 
    anyimage.setX(45); 
       stage.draw(); 
       console.log('loaded'); 
}