Question

我正在尝试使用Konvajs（水平）翻转一个组。按照 this post的建议，我正在使用scaleX属性。这行之有效---主要是。但是，它不会围绕中心翻转。

function reverse(shape){
   var layer = shape.getLayer();
   var oldScaleX = shape.attrs.scaleX;
   var width = shape.getClientRect().width;
   var adjuster = oldScaleX * width;
   var startX = shape.attrs.x + adjuster;
   var startY = shape.attrs.y;
   shape.scaleX(-oldScaleX); 
   shape.position({x: startX, y: startY});
   layer.draw();
};

我尝试像在this post中一样使用offsetX和offsetY属性，但是似乎没有任何作用。

shape.offsetX(shape.width()/2);
shape.offsetY(shape.height()/2);
shape.x(shape.x() - shape.attrs.offsetX);
shape.y(shape.y() - shape.attrs.offsetY);

形状最初会翻转，但是如果先旋转，它们会跳来跳去。

Codepen

Answer 1

根据我在this other question中发布的函数，下面是一个片段，用于绕其中心旋转形状。在这种情况下，形状是由2个矩形组成的组，但是任何形状都可以。

// Set up the canvas / stage
  var stage = new Konva.Stage({container: 'container', width: 600, height: 200});
  var layer = new Konva.Layer({draggable: false});
  stage.add(layer);

  var shape = new Konva.Group({x: 80, y: 40, width: 60, height: 60 });
  var r1 = new Konva.Rect({ x:10, y:10, width: 70, height: 40, fill: 'cyan'})
  var r2 = new Konva.Rect({ x:50, y:10, width: 40, height: 100, fill: 'cyan'})
  shape.add(r1)  
  shape.add(r2)  
  layer.add(shape)


  // set the group rotate point. Note - x,y is relative to top-left of stage !
	var pos = shape.getClientRect();
  RotatePoint(shape, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});

  stage.draw();

  // This is where the flip happens 
  var scaleX = 1, inc = -0.2;  // set inc = 1 for full flip in one call
  function flipShape(){

    scaleX = scaleX + inc;
    shape.scaleX(scaleX); // and that's it

    // fun with colors on front and back of shape
    r1.fill(scaleX < 0 ? 'magenta' : 'cyan');
    r2.fill(scaleX < 0 ? 'magenta' : 'cyan');

    $('#info').html('Set ScaleX(' + scaleX.toFixed(2) + ')'); // What's happening?

    layer.draw();  // show the change

    inc = (scaleX % 1 === 0 ? -1 * inc : inc);  // decide next increment, reversed at 1 & -1
  }

$('#flip').on('click', function(e){

  flipShape(); // click button - flip shape a bit

})


/*
Set the offset for rotation to the given location and re-position the shape
*/
function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}
var initialPos = shape.getAbsolutePosition();
var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};

// offset is relative to initial x,y of shape, so deduct x,y.
shape.offsetX(moveBy.x);
shape.offsetY(moveBy.y);

// reposition x,y because changing offset moves it.
shape.x(initialPos.x + moveBy.x);
shape.y(initialPos.y + moveBy.y);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<p>Clck the button to progressively flip a shape using scaleX &nbsp;<button id='flip'>Flip a bit</button>&nbsp;<span id='info'></span></p>

<div id='container' style="position: absolute; top: 0; z-index: -1; display: inline-block; width: 600px, height: 200px; background-color: silver; "></div>

如何在konvajs中翻转旋转的图像

1 个答案: