コンバJS。画像の位置を変更する、回転する

Question

私は画像を追加しています。

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

この画像の位置と角度を取得および変更するにはどうすればよいですか？ 後でこれらの設定を変更する方法。イベント別。たとえば、ボタンをクリックします。 メソッドthis.setX（）、this.rotare（）、this.x =画像objでは機能しません。

Answer 1

位置とサイズは、新しいKonva.Image（）呼び出しで設定したとおりです。ローテーションはthis example以下の作業スニペットで実演されています。基本的に、形状の 'オフセット'プロパティによって設定された回転点があります。デフォルトでは、これは画像矩形の左上にあります。シェイプのrotate（）関数を適用すると、単一のパラメータを回転させる角度に設定し、回転はシェイプのオフセット（x、y）の位置を中心にして行われます。

遊び場については下記のスニペットをご覧ください。

注：予期せぬ予期しない振る舞いについて著者に質問をしました。これは、オフセット位置を変更して回転中心を変更しようとすると、その形状が物理的に移動することを意味します。

// 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

ソリューション。 anyimage objを使用する必要があります。美人ではない。

<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'); 
}