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

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 中发布的函数，这里有一个 sn-p 可以围绕其中心旋转一个形状。在这种情况下，形状是由 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>