KonvaJS 在 SVG 上围绕中心变换旋转

Question

I create text on canvas using KonvaJS . And I can freeze the text using Transformer. While drawing, the origin remains in the center as I wish there is no problem here. However, when I want to use the data with svg here, x and y come true without freezing. But when I do ice cream it freezes outside the center. Here

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

It works when I freeze using it. Because x and y values are not changing. However, while drawing on KonvJs, if I freeze, the values of xtation and y change together with the value of ratation . The code between the shortened example.

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>
  )
}

It will be enough to work in the section I made by giving offset in the convention. The important example is that I can show with svg on the client side. 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

You may need to calculate the center of the shape, to position it in SVG correctly.

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>
  );
}

Demo: https://codesandbox.io/s/konva-and-svg-demo-jx7sj?file=/src/Playground.js:1704-2583