如何围绕路径的中心点旋转路径？

Question

我有以下在 RN Skia 中旋转形状的代码。我想知道如何围绕形状的中心点旋转形状，而不是围绕下面屏幕截图中的点旋转。

import {
  Path,
  Skia,
  useClockValue,
  useComputedValue,
  Canvas,
  vec

} from '@shopify/react-native-skia'
import React, { useEffect } from 'react'
import { Dimensions } from 'react-native'

import PathCommands from '../PathCommands'

const { width, height } = Dimensions.get('window')
const c = vec(width / 2, height / 2)

export const Headspace = () => {
  const clock = useClockValue()
  useEffect(() => {
    clock.start()
  }, [])

  const path = useComputedValue(() => {
    const p = Skia.Path.Make()

    for (const command of PathCommands.commands) {
      p[command.type](...command.args)
    }

    const m = Skia.Matrix()
    m.translate(c.x, c.y)
    m.rotate(clock.current / 2000)
    p.transform(m)

    return p
  }, [clock])

  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path={path}
        style='stroke'
        strokeWidth={1}
        antiAlias
      />
    </Canvas>
  )
}

下面列出了形状的 SVG 路径表示法（如果相关）。其宽度约为 173 个单位，高度约为 172 个单位。

M154.031 57.526l-.065.327.277.185c11.309 7.571 16.908 17.778 16.908 27.93 0 10.153-5.599 20.359-16.908 27.93l-.277.186.065.327c2.642 13.35-.616 24.525-7.794 31.703-7.178 7.178-18.353 10.436-31.704 7.794l-.327-.065-.185.277c-7.571 11.31-17.778 16.909-27.93 16.909-10.153 0-20.36-5.599-27.93-16.909l-.186-.277-.327.065c-13.35 2.642-24.526-.616-31.704-7.794-7.177-7.178-10.435-18.353-7.793-31.703l.064-.327-.277-.186C6.63 106.327 1.03 96.121 1.03 85.968c0-10.152 5.599-20.359 16.908-27.93l.277-.185-.064-.327c-2.642-13.35.616-24.526 7.794-31.704 7.178-7.178 18.352-10.436 31.703-7.794l.327.065.186-.277C65.735 6.506 75.942.908 86.094.908c10.151 0 20.356 5.599 27.927 16.908l.185.277.327-.065c13.351-2.642 24.526.616 31.704 7.794 7.178 7.178 10.436 18.353 7.794 31.704z

Answer 1

你就快到了。要旋转，请平移到路径的中心点。然后像您正在做的那样执行旋转，然后平移回原始位置。据我所知，你错过了最后一步。还要确保第一个翻译实际上位于您路径的中心。

假设 center 是你路径的中心：

const matrix = Skia.Matrix();
matrix.translate(center.x, center.y)
matrix.rotate(clock.current / 2000)
matrix.translate(-center.x, -center.y);
path.transform(matrix);