Конва JS преобразовать вращение вокруг центра на SVG - PullRequest
Новая
       37

Конва JS преобразовать вращение вокруг центра на SVG

0 голосов
/ 22 апреля 2020

Я создаю текст на холсте, используя KonvaJS. И я могу заморозить текст с помощью Transformer. Во время рисования источник остается в центре, поскольку я sh здесь нет никаких проблем. Однако, когда я хочу использовать данные с svg здесь, x и y осуществляются без замораживания. Но когда я делаю мороженое, оно замерзает за пределами центра. Здесь 

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

Это работает, когда я замерзаю, используя его. Потому что значения х и у не меняются. Однако при рисовании на Konv Js, если я замерзаю, значения 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>

1 Ответ

1 голос
/ 28 апреля 2020

Вам может потребоваться вычислить центр фигуры, чтобы правильно расположить ее в 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.io/s/konva-and-svg-demo-jx7sj?file= / src / Playground. js: 1704-2583

...