如何在 KonvaJS 中的变压器上设置默认（或基础）旋转？

Question

一些上下文：

在我的应用程序中，我必须显示生成的 SVG，这不会导致任何问题。

但在某些时候，后端可能（并且将会）return 旋转（修改）的 SVG，我在 canvas 中显示（我知道实际的旋转）。

我的问题：

我的问题是我找不到设置变压器底座旋转的方法。

例如，我知道我插入的图像是一个 90° 旋转的图像，我希望在选择图像时通过变换器显示这个旋转（图像的基础 "canvas-rotation" 为 0 °, 变压器底座 "canvas-rotation" 为 90°).

总结：

换句话说，是否可以根据附加节点来抵消变压器旋转？

Answer 1

无法为 Konva.Transformer 设置 "rotation offset"。您必须为此使用节点的旋转。如果您有 SVG 图像，您可以旋转将其绘制到屏幕外 canvas，然后将 canvas 用于 Konva.Image。

var imageObj = new Image();
imageObj.onload = function() {

  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 200;

  const ctx = canvas.getContext('2d');
  ctx.translate(canvas.width / 2, 0);
  ctx.rotate(Math.PI / 4);
  ctx.drawImage(imageObj, 0, 0, canvas.width * Math.cos(Math.PI / 4), canvas.height * Math.cos(Math.PI / 4))

  var yoda = new Konva.Image({
    x: 60,
    y: 60,
    image: canvas,
    draggable: true
  });
  // add the shape to the layer
  layer.add(yoda);


  const tr = new Konva.Transformer({
    node: yoda
  })
  layer.add(tr);
  layer.draw();
};
imageObj.src = 'https://konvajs.org/assets/yoda.jpg';

https://jsbin.com/korigegupo/edit?html,js,output

如何在 KonvaJS 中的变压器上设置默认（或基础）旋转？

How to set a default (or base) rotation on a transformer in KonvaJS?

javascript

konvajs

一些上下文：

我的问题：

总结：