如何在画布上翻转形状或图像？

有可能垂直或水平翻转形状吗？

要翻转任何节点，您可以使用负的 scaleX 来水平翻转，或使用 scaleY 来垂直翻转。

请记住，scale 属性是相对于节点的原点工作的。例如，对于矩形，其原点是左上角；对于圆形，其原点是中心。如果您想更改节点的原点，可以使用 offsetX 和 offsetY 属性。为了更好地理解原点和偏移，您可以查看 位置与偏移帖子。

根据您的使用案例，您可能需要手动更改节点的 {x, y} 属性，以在缩放后保持其原始位置。

操作说明：点击翻转按钮，查看它们是如何被镜像的。

Vanilla

import Konva from 'konva';

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

var layer = new Konva.Layer();
stage.add(layer);

var text1 = new Konva.Text({
  x: 180,
  y: 50,
  text: '没有偏移的默认文本。它的原点在左上角。',
  align: 'center',
  width: 200,
});
layer.add(text1);

var text2 = new Konva.Text({
  text: '原点在中心的文本',
  width: 200,
  align: 'center',
  y: 100,
  x: 270,
});
layer.add(text2);
// 设置文本的水平原点在中心

text2.offsetX(text2.width() / 2);

var button = document.createElement('button');
button.innerText = '水平翻转';
button.style.position = 'absolute';
button.style.top = '5px';
button.style.left = '5px';
document.body.appendChild(button);

button.addEventListener('click', () => {
  layer.find('Text').forEach((text) => {
    text.to({
      scaleX: -text.scaleX(),
    });
  });
});

Open Sandbox

React

import { Stage, Layer, Text } from 'react-konva';
import { useState, useRef } from 'react';

const App = () => {
  const [texts, setTexts] = useState([
    {
      id: 1,
      text: '没有偏移的默认文本。它的原点在左上角。',
      x: 180,
      y: 50,
      width: 200,
      align: 'center',
      scaleX: 1,
      offsetX: 0
    },
    {
      id: 2,
      text: '原点在中心的文本',
      x: 270,
      y: 100,
      width: 200,
      align: 'center',
      scaleX: 1,
      offsetX: 100 // 一半的宽度以居中

    }
  ]);

  const handleFlip = () => {
    setTexts(texts.map(text => ({
      ...text,
      scaleX: -text.scaleX
    })));
  };

  return (
    <div>
      
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          {texts.map((text) => (
            <Text
              key={text.id}
              x={text.x}
              y={text.y}
              text={text.text}
              width={text.width}
              align={text.align}
              scaleX={text.scaleX}
              offsetX={text.offsetX}
            />
          ))}
        </Layer>
      </Stage>
      <button
        onClick={handleFlip}
        style={{
          position: 'absolute',
          top: '5px',
          left: '5px'
        }}
      >
        水平翻转
      </button>
    </div>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <v-stage :config="stageConfig">
      <v-layer>
        <v-text
          v-for="text in texts"
          :key="text.id"
          :config="text"
        />
      </v-layer>
    </v-stage>
    <button
      @click="handleFlip"
      style="position: absolute; top: 5px; left: 5px;"
    >
      水平翻转
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const stageConfig = {
  width: window.innerWidth,
  height: window.innerHeight
};

const texts = ref([
  {
    id: 1,
    text: '没有偏移的默认文本。它的原点在左上角。',
    x: 180,
    y: 50,
    width: 200,
    align: 'center',
    scaleX: 1,
    offsetX: 0
  },
  {
    id: 2,
    text: '原点在中心的文本',
    x: 270,
    y: 100,
    width: 200,
    align: 'center',
    scaleX: 1,
    offsetX: 100 // 一半的宽度以居中

  }
]);

const handleFlip = () => {
  texts.value = texts.value.map(text => ({
    ...text,
    scaleX: -text.scaleX
  }));
};
</script>

Open Sandbox