1

I have the following the code which rotates a shape in RN Skia. I am wondering how I can rotate the shape around the central point of the shape, rather than around the point in the screenshot below.

enter image description here

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

The SVG Path Notation for the shape is listed below, if that is relevant. It works out to ~173 units width and ~172 units height.

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
jsindos
  • 459
  • 6
  • 22

0 Answers0