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

Posted 2023-03-25

【中文标题】如何在 konvajs 中翻转旋转的图像

【英文标题】：How to flip a rotated image in konvajs

【发布时间】：2019-04-03 20:54:46

【问题描述】：

我正在尝试使用 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

【问题讨论】：

我发布了something re rotation points - 可能有帮助。

如果您在任何翻转操作之前将形状的原点设置为其中心（使用偏移），这对您来说会简单得多。反过来，您只需要应用负比例。

【参考方案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>