KonvaJS在SVG上进行绕中心旋转变换。

Question

我在画布上创建文本，使用 KonvaJS. 而且我可以使用Transformer冻结文本。绘制时，原点保持在中心位置，因为我希望这里没有问题，但是，当我想在这里使用svg数据时。x 和y 不结冰就能成真。但是当我做冰激凌的时候，它就会冻在中心外面。这是我的

transform={{
    rotation: 90,
    originX: x + width / 2,
    originY: y + height / 2,
}}

当我冻结使用它时，它可以工作。因为x和y的值没有变化。但是，当我在KonvJs上绘图的时候，如果我冻结了，x和y的值就会改变。xtation 和y 价值的变化 ratation.之间的代码缩短的例子。

import React, { Fragment, useEffect, useRef } from 'react'
import { Text, Transformer } from 'react-konva'

import { useStore } from './store'

export default function ({ id, text }) {
  const { regions, selected, setRegions, setSelected } = useStore()

  const { x, y, value, color, rotation, fontSize } = text

  const TextRef = useRef()
  const TransformRef = useRef()

  const onDragEnd = ({ target }) => {
    setRegions(
      regions.map((item) => {
        if (item.id === id) {
          item.text = {
            ...item.text,
            x: target.x(),
            y: target.y(),
            width: target.width(),
            height: target.height(),
          }
        }

        return item
      })
    )
  }

  const onTransformEnd = () => {
    const node = TextRef.current

    const width = node.width()
    const height = node.height()

    const x = node.x()
    const y = node.y()
    const rotation = node.rotation()

    const originX = x + width / 1.3
    const originY = y + height / 1.3

    setRegions(
      regions.map((item) => {
        if (item.id === id) {
          item.text = {
            ...item.text,
            x, // <= it changes when this is rotation
            y, // <= it changes when this is rotation
            rotation,
            originX,
            originY,
          }
        }

        return item
      })
    )
  }


  const isSelected = id === selected

  useEffect(() => {
    if (isSelected) {
      TransformRef.current.setNode(TextRef.current)
      TransformRef.current.getLayer().batchDraw()
    }
  }, [isSelected])

  return (
    <Fragment>
      <Text
        draggable
        name="region"
        x={x}
        y={y}
        text={value}
        fill={color}
        ref={TextRef}
        rotation={rotation}
        fontSize={fontSize}
        onDragEnd={onDragEnd}
        onTransformEnd={onTransformEnd}
      />

      {isSelected && (
        <Transformer
          ref={TransformRef}
        />
      )}
    </Fragment>
  )
}

它将足以在我做的部分工作，通过给予偏移在公约。重要的例子是，我可以用svg在客户端显示。React Native Svg

<G
    transform={{
        rotation: rotation,
        originX: x + width / 2,
        originY: y + height / 2,
    }}>

    <Text
        x={x}
        y={y}
        fill={'#fff'}
        fontSize={fontSize}
        textAnchor="start"
    >
        {value}
    </Text>
</G>

Answer 1

你可能需要计算形状的中心点，以便在SVG中正确定位。

function getCenter(shape) {
  return {
    x:
      shape.x +
      (shape.width / 2) * Math.cos(shape.rotation) +
      (shape.height / 2) * Math.sin(-shape.rotation),
    y:
      shape.y +
      (shape.height / 2) * Math.cos(shape.rotation) +
      (shape.width / 2) * Math.sin(shape.rotation)
  };
}

function Show({ text, x, y, rotation, width, height }) {
  const center = getCenter({
    x,
    y,
    width,
    height,
    rotation: (rotation / 180) * Math.PI
  });

  return (
    <svg width={window.innerWidth} height={window.innerHeight / 2}>
      <text
        y={height / 1.3}
        fill="#000"
        fontSize={50}
        alignment-baseline="bottom"
        transform={`translate(${x}, ${y}) rotate(${rotation})`}
      >
        {text}
      </text>
      {/* Origin Circl  */}
      <circle cx={center.x} cy={center.y} r={10} fill="red" />
    </svg>
  );
}

演示。https:/codesandbox.ioskonva-and-svg-demo-jx7sj?file=srcPlayground.js:1704-2583。