fix(circle): offset-degree prop behaves incorrectly

CHANGELOG.en-US.md

@@ -20,6 +20,7 @@
 - Fix `n-input-number` register `mouseup` event multiple times when hold on button.
 - Fix all components' exported props type's prop is `readonly`.
 - Fix `n-tree`'s `check-on-click` prop sometimes doesn't work.
+- Fix `n-progress`'s `offset-degree` prop behaves incorrectly.
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -20,6 +20,7 @@
 - 修复 `n-input-number` 按住按钮时重复注册 `mouseup` 事件
 - 修复所有组件导出的 props 类型属性都是 `readonly` 的
 - 修复 `n-tree` 的 `check-on-click` 属性有时不生效
+- 修复 `n-progress` 的 `offset-degree` 表现不正确
 
 ### Feats
 

src/progress/demos/enUS/circle-offset.demo.vue

@@ -5,5 +5,5 @@ Circular progress can have `offset-degree`.
 </markdown>
 
 <template>
-  <n-progress type="circle" :percentage="50" :offset-degree="90" />
+  <n-progress type="circle" :percentage="80" :offset-degree="120" />
 </template>

src/progress/demos/enUS/dashboard.demo.vue

@@ -6,12 +6,12 @@ Maybe you also need `gap-degree` and `gap-offset-degree` properties to customize
 
 <template>
   <n-space>
-    <n-progress type="dashboard" :percentage="50" />
+    <n-progress type="dashboard" gap-position="bottom" :percentage="80" />
     <n-progress
       type="dashboard"
-      :gap-offset-degree="90"
-      :gap-degree="90"
-      :percentage="50"
+      :gap-offset-degree="120"
+      :gap-degree="120"
+      :percentage="80"
     />
   </n-space>
 </template>

src/progress/demos/zhCN/circle-offset.demo.vue

@@ -5,5 +5,5 @@
 </markdown>
 
 <template>
-  <n-progress type="circle" :percentage="50" :offset-degree="90" />
+  <n-progress type="circle" :percentage="80" :offset-degree="120" />
 </template>

src/progress/demos/zhCN/dashboard.demo.vue

@@ -6,12 +6,12 @@
 
 <template>
   <n-space>
-    <n-progress type="dashboard" gap-position="bottom" :percentage="50" />
+    <n-progress type="dashboard" gap-position="bottom" :percentage="80" />
     <n-progress
       type="dashboard"
-      :gap-offset-degree="90"
-      :gap-degree="90"
-      :percentage="50"
+      :gap-offset-degree="120"
+      :gap-degree="120"
+      :percentage="80"
     />
   </n-space>
 </template>

src/progress/src/Circle.tsx

@@ -81,7 +81,9 @@ export default defineComponent({
         strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${
           viewBoxWidth * 8
         }px`,
-        strokeDashoffset: `-${gapDegree / 2 + (Math.PI / 3.6) * offsetDegree}px`
+        strokeDashoffset: `-${gapDegree / 2}px`,
+        transformOrigin: offsetDegree ? 'center' : undefined,
+        transform: offsetDegree ? `rotate(${offsetDegree}deg)` : undefined
       }
       return {
         pathString,