@ray-js/lamp-circle-picker 1.0.11-beta-4 → 1.0.11-beta-5

package/example/src/pages/index.tsx

@@ -46,6 +46,7 @@ export default function Home() {
           value={temperature}
           useEventChannel
           hideThumb
+          lineCap="butt"
           onTouchMove={handleMove}
           onTouchEnd={handleEnd}
         />

package/lib/component/index.js

@@ -15,6 +15,7 @@ export default function RectColor(props) {
     canvasId: props.canvasId,
     colorList: (_props$colorList = props.colorList) !== null && _props$colorList !== void 0 ? _props$colorList : [],
     useEventChannel: props.useEventChannel,
+    lineCap: props.lineCap || 'round',
     eventChannelName: props.eventChannelName,
     touchCircleStrokeStyle: props.touchCircleStrokeStyle,
     touchCircleLineWidth: touchCircleLineWidth,

package/lib/component/props.d.ts

@@ -35,6 +35,12 @@ export interface IProps {
      * @default false
      */
     useEventChannel?: boolean;
+    /**
+     * @description.zh 绘制的圆环末端样式
+     * @description.en Drawn ring end style
+     * @default round
+     */
+    lineCap?: 'butt' | 'round';
     /**
      * @description.zh 色盘渐变颜色列表
      * @description.en Color plate gradient color list

package/lib/component/rjs/index.js

@@ -41,6 +41,10 @@ Component({
       type: String,
       value: 'lampCirclePickerEventChannel'
     },
+    lineCap: {
+      type: String,
+      value: 'round'
+    },
     touchCircleStrokeStyle: String,
     touchCircleLineWidth: Number,
     onTouchStart: Function,
@@ -106,6 +110,7 @@ Component({
         useEventChannel,
         eventChannelName,
         colorList,
+        lineCap = 'round',
         touchCircleStrokeStyle = '',
         touchCircleLineWidth = 0
       } = this.data;
@@ -117,6 +122,7 @@ Component({
         useEventChannel,
         eventChannelName,
         hideThumb,
+        lineCap,
         colorList,
         touchCircleStrokeStyle,
         touchCircleLineWidth

package/lib/component/rjs/index.rjs

@@ -324,7 +324,7 @@ export default Render({
   // 环形色盘
   async renderAnnulusColor(id, radius, innerRingRadius, temp = 0, options = {}) {
     let canvas = null;
-    const { touchCircleStrokeStyle = '', touchCircleLineWidth = 0, hideThumb = false } = options || {};
+    const { touchCircleStrokeStyle = '', touchCircleLineWidth = 0, hideThumb = false, lineCap = 'round' } = options || {};
     this.touchCircleStrokeStyle = touchCircleStrokeStyle;
     this.touchCircleLineWidth = touchCircleLineWidth;
     this.hideThumb = hideThumb;
@@ -348,18 +348,19 @@ export default Render({
 
     const startAngle = Math.PI * 0.75;
     const endAngle = Math.PI * 0.25;
-
+    const counterclockwise = false;
     ctx.beginPath();
     ctx.arc(
       radius * 2,
       radius * 2,
       innerRingRadius * 2 + (radius - innerRingRadius),
       startAngle,
-      endAngle
+      endAngle,
+      counterclockwise
     );
 
     let grd = null;
-    if (ctx.createConicGradient) {
+    if (ctx.createConicGradient && lineCap === 'round') {
       try {
         grd = ctx.createConicGradient(startAngle - Math.PI * 0.1, radius * 2, radius * 2);
         options.colorList?.forEach(item => {
@@ -370,7 +371,7 @@ export default Render({
         //给曲线着色
         ctx.strokeStyle = grd;
         //连接处样式
-        ctx.lineCap = 'round';
+        ctx.lineCap = lineCap || 'round';
         //给环着色
         ctx.stroke();
         ctx.closePath();

package/lib/index.js

@@ -16,6 +16,7 @@ const LampCirclePicker = props => {
     colorList,
     useEventChannel,
     eventChannelName,
+    lineCap,
     titleStyle,
     descStyle,
     descText,
@@ -57,6 +58,7 @@ const LampCirclePicker = props => {
     touchCircleStrokeStyle: touchCircleStrokeStyle,
     innerRingRadius: innerRingRadius,
     colorList: _colorList,
+    lineCap: lineCap,
     useEventChannel: useEventChannel || false,
     eventChannelName: eventChannelName,
     onTouchStart: onTouchStart,

package/lib/props.d.ts

@@ -74,6 +74,12 @@ export interface IProps {
      * @default null
      */
     eventChannelName?: string;
+    /**
+     * @description.zh 绘制的圆环末端样式
+     * @description.en Drawn ring end style
+     * @default round
+     */
+    lineCap?: 'butt' | 'round';
     /**
      * @description.en titleStyle
      * @description.zh 标题样式

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-circle-picker",
-  "version": "1.0.11-beta-4",
+  "version": "1.0.11-beta-5",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [