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 =不适用于图像对象。

Answer 1

解。需要使用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');
}

Answer 2

您在新的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>

Konva JS。更改图像位置，旋转

2 个答案: