How to "rotate" a circle?

[Noitham]

Hi,

I've been playing a little bit around with react-native-skia and I haven't been able to achieve what I was looking for.

I want to draw a circle, but instead, have it drawn from the 0º angle (pi/2), rather than 90º (0).

I've played a bit around with
<Group transform={[{ rotate: -90 }]} origin={{ x: center, y: center }}>

Which does render in the form, but then the dragging gets messed.

const circleFill = Skia.Path.Make().addCircle(center, center, r);

<Path
  path={circleFill}
  color={`green`}
  style={`stroke`}
  strokeJoin={`round`}
  strokeCap={`round`}
  strokeWidth={fillStrokeWidth}
  start={0}
  end={skiaPercentComplete}
/>

Could this also be understood as setting the start to 0.75 & end to 1.75?

[wcandillon]

yes you can draw the path so it doesn't depend on calculating its own transformation.
One way for instance would be to perform the transform on the path. then you will have it without the need to add the transform in the group.

const m = Skia.Matrix();
m.translate(c.x, c.y);
m.rotate();
m.translate(-c.x, -c.y);

const circleFill = Skia.Path.Make().addCircle(center, center, r);
circleFill.transform(m);

[jatin-bhuva]

[This is i want]
Hi, I have the same issue, I want to start the stroke from the centre top as you can see in the image above.
But currently,
my stroke starts from the right side centre see below. can you guide me on how can I achieve that displayed in the above image?
[This is i built till now]

[jatin-bhuva]

import {
Canvas,
Circle,
Group,
Path,
Rect,
RoundedRect,
Shadow,
Skia,
} from "@shopify/react-native-skia";
import React, { useEffect, useRef, useState } from "react";
import { Dimensions, StyleSheet, View } from "react-native";
import {
Gesture,
GestureDetector,
GestureHandlerRootView,
} from "react-native-gesture-handler";
import Animated, {
runOnJS,
useAnimatedStyle,
useDerivedValue,
useSharedValue,
} from "react-native-reanimated";
import { canvas2Polar, polar2Canvas, ReText } from "react-native-redash";
import { Svg, Text } from "react-native-svg";

const { width, height } = Dimensions.get("window");

export const CircularSlider = ({circleWidth=width}) => {
const strokeWidth = 51;
const center = circleWidth / 2;
const r = (circleWidth - strokeWidth) / 2 ;
// const startAngle = 2 * Math.PI - 0.00000001;
// const endAngle = 2 * Math.PI;
// const x1 = center - r * Math.cos(startAngle);
// const y1 = -r * Math.sin(startAngle) + center;
// const x2 = center - r * Math.cos(endAngle);
// const y2 = -r * Math.sin(endAngle) + center;

const movableCx = useSharedValue(0);
const movableCy = useSharedValue(0);
const previousPositionX = useSharedValue(0);
const previousPositionY = useSharedValue(0);
const percentComplete = useSharedValue(0);

const teed= useRef(0)

const [stateOfCharge,setStateOfCharge]=useState(20)

useDerivedValue(() => {
  runOnJS(setStateOfCharge)(percentComplete.value);
}, [percentComplete.value]);
useEffect(() => {
  const newCoords = polar2Canvas(
    {
      theta: 0.1*Math.PI,
      radius: r,
    },
    {
      x: center,
      y: center,
    }
  );

console.log('...........first',newCoords.x, newCoords.y)
movableCx.value = newCoords.x;
movableCy.value = newCoords.y;
previousPositionX.value = newCoords.x;
previousPositionY.value = newCoords.y

  percentComplete.value = ( -0.4*Math.PI) / (-2 * Math.PI)
}, []);

useEffect(()=>{
    console.log(".......",movableCx,movableCy)
},[movableCx,movableCy])
const center1 = { x: r, y: r };
const gesture = Gesture.Pan()
  .onUpdate(({ translationX, translationY, absoluteX,x,y }) => {
    const myPolar = canvas2Polar({ x: x, y: y }, center1);

    // console.log(previousPositionX.value, previousPositionY.value)
    if (true) {
    const oldCanvasX = translationX + previousPositionX.value;
    const oldCanvasY = translationY + previousPositionY.value;
    const xPrime = oldCanvasX - center;
    const yPrime = -(oldCanvasY - center);
    const rawTheta = Math.atan2(yPrime, xPrime);

    if (rawTheta < 0) {
      rawTheta += 2 * Math.PI;
    }
    let newTheta;
    if(rawTheta<1.6*Math.PI&&rawTheta>0.1*Math.PI){
      newTheta = rawTheta;

      const percent = 1 - newTheta / (2 * Math.PI);
      percentComplete.value = percent;
      teed.current = percent?.toString()
      const newCoords = polar2Canvas(
        {
          theta: newTheta ,
          radius: r,
        },
        {
          x: center,
          y: center,
        }
      );
 
      movableCx.value = newCoords.x;
      movableCy.value = newCoords.y;
    }
}
  })
  .onEnd(() => {
    previousPositionX.value = movableCx.value;
    previousPositionY.value = movableCy.value;
  });

const style = useAnimatedStyle(() => {
  return { height: 200, width: 300, opacity: percentComplete.value };
}, [percentComplete]);

const m = Skia.Matrix();

m.translate(center, center);
m.rotate(3*Math.PI/2);
m.translate(-center, -center);
console.log('==========================Start-Log-Massage========================================');
console.log('mm',m);
console.log('==============================End-Log-Massage======================================');
const path = Skia.Path.Make()
path.addCircle(center, center, r).transform(m);
const getStateOfCharge=(percent,)=>{
console.log('...........',percent)
return percent?.toString()
}

return (
  <View style={styles.container(circleWidth)}>
    <Canvas style={styles.canvas}>
    <RoundedRect
    x={0}
    y={0}
    width={width}
    height={width}
    r={r+strokeWidth}
    color="#F2F2F2"
  >
        <Shadow dx={2} dy={2} blur={3} color="rgba(174,174,192, 0.4)" />
        <Shadow dx={-2} dy={-2} blur={3} color="white" />
  </RoundedRect>
      <Path
        path={path}
        style="stroke"
        strokeWidth={strokeWidth}
        strokeCap="round"
        color={"#D0D0D0"}
      >
      </Path>
    </Canvas>
  
    <GestureHandlerRootView
    style={{ position: "absolute", width: width, height: 1000 }}
  >
    <GestureDetector gesture={gesture}>
      <Canvas style={{ flex:1, }}>
      <Group  origin={{x: center , y: center }} 
    //   transform={[{rotate:3/2*Math.PI}]}
      >
      <Path
        path={path}
        color={"#0085C4"}
        style={"stroke"}
        strokeCap={"butt"}
        strokeWidth={strokeWidth}
        start={0}
        end={percentComplete}
      />
        <Circle
          cx={movableCx}
          cy={movableCy}
          r={strokeWidth/2}
          color="#00A1ED"
          style="fill"
        />
      </Group>

      </Canvas>
      
    </GestureDetector>
  </GestureHandlerRootView>
    <Svg style={StyleSheet.absoluteFill}>
    <Text
          textAnchor='middle'
          fontSize={17}
          fill='#606060'
          alignmentBaseline='central'
          x={center}
          y={center}>
         {Math.round(stateOfCharge*100)}
        </Text>

    </Svg>
  </View>
);

};

const styles = StyleSheet.create({
container:(width)=> ({
width:width,
height:width,
// transform: [{ rotate: "270deg" }],
}),
canvas: {
flex: 1,

},
cursor: {
  backgroundColor: "green",
},

});

this is full code, please guide me.

[JatinBhuva]

@Noitham Could you provide me the full code for the slider you developed? I'm trying the same but don't know where I'm messing something.
I'm unable to place the white nob in proper position.