@ray-js/lamp-circle-picker 1.0.11-beta-3 → 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,13 +110,19 @@ Component({
         useEventChannel,
         eventChannelName,
         colorList,
+        lineCap = 'round',
         touchCircleStrokeStyle = '',
         touchCircleLineWidth = 0
       } = this.data;
+      // 防止重复渲染
+      if (this.lastValue === value) {
+        return;
+      }
       canvasId && this.render.renderAnnulusColor(canvasId, radius, innerRingRadius, value, {
         useEventChannel,
         eventChannelName,
         hideThumb,
+        lineCap,
         colorList,
         touchCircleStrokeStyle,
         touchCircleLineWidth

package/lib/component/rjs/index.rjs

@@ -7,15 +7,15 @@ function reverseColorStops(colorStops) {
     return [];
   }
 
-  const reversedColorStops = colorStops.map(stop => ({
+  const _reversedColorStops = colorStops.map(stop => ({
     offset: 1 - stop.offset,
     color: stop.color,
   }));
 
   // 由于反转 offset 后，需要根据新的 offset 重新排序
-  reversedColorStops.sort((a, b) => a.offset - b.offset);
+  _reversedColorStops.sort((a, b) => a.offset - b.offset);
 
-  return reversedColorStops;
+  return _reversedColorStops;
 }
 
 export default Render({
@@ -264,7 +264,6 @@ export default Render({
 
   // 环形色盘 降级绘制
   async renderAnnulusColorLowRank(id, radius, innerRingRadius, options = {}) {
-    console.warn('renderAnnulusColorLowRank', JSON.stringify(options));
     let canvas = null;
     const { touchCircleStrokeStyle, ringBorderColor } =
       options;
@@ -302,15 +301,13 @@ export default Render({
     const offsetDegree = 270;
     const endDegree = startDegree + offsetDegree;
   
-    // 颜色渲染时 按照逆时针渲染，需要按照顺时针渲染， 所以需要反转
-    const reversedColorStops = reverseColorStops(colorList);
      this.drawRingWithConicGradient({
       startAngle: startDegree,
       endAngle: endDegree,
       offsetDegree,
       innerRadius: innerRingRadius,
       outerRadius: radius,
-      colorList: reversedColorStops,
+      colorList: colorList,
       canvas,
       ctx,
       centerX: poxCenterX,
@@ -327,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;
@@ -351,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 => {
@@ -373,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

@@ -19,7 +19,7 @@ export interface IProps {
      * @description.en Whether to hide the drag ring
      * @default false
      */
-    hideThumb: boolean;
+    hideThumb?: boolean;
     /**
      * @description.en temperature
      * @description.zh 色温
@@ -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-3",
+  "version": "1.0.11-beta-5",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [