Merge pull request #1555 from VisActor/feat/keepStrokeScale

feat: support keepStrokeScale

common/changes/@visactor/vrender-core/feat-keepStrokeScale_2024-11-13-08-47.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "feat: support keepStrokeScale",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}

packages/vrender-core/src/graphic/config.ts

@@ -188,6 +188,7 @@ export const DefaultAttribute: Required<IGraphicAttribute> = {
   globalCompositeOperation: '',
   overflow: 'hidden',
   shadowPickMode: 'graphic',
+  keepStrokeScale: false,
   ...DefaultDebugAttribute,
   ...DefaultStyle,
   ...DefaultTransform

packages/vrender-core/src/interface/context.ts

@@ -34,6 +34,7 @@ export interface IStrokeStyleParams {
   lineJoin?: CanvasLineJoin;
   miterLimit?: number;
   opacity?: number;
+  keepStrokeScale?: boolean;
 }
 export interface ITextStyleParams {
   font?: string;

packages/vrender-core/src/interface/graphic.ts

@@ -322,6 +322,9 @@ export type IGraphicAttribute = IDebugType &
     overflow: 'scroll' | 'hidden' | 'scroll-x' | 'scroll-y';
     // 绘制fill和stroke的顺序，为0表示fill先绘制，1表示stroke先绘制
     fillStrokeOrder: number;
+    // @since 0.20.15
+    // 保持stroke的scale，默认为false，为true的话stroke显示的宽度会随着scale变化
+    keepStrokeScale: boolean;
   };
 
 export interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {

packages/vrender-core/src/render/contributions/render/contributions/arc-contribution-render.ts

@@ -56,7 +56,8 @@ export class DefaultArcRenderContribution implements IArcRenderContribution {
       x: originX = arcAttribute.x,
       y: originY = arcAttribute.y,
       scaleX = arcAttribute.scaleX,
-      scaleY = arcAttribute.scaleY
+      scaleY = arcAttribute.scaleY,
+      keepStrokeScale = arcAttribute.keepStrokeScale
     } = arc.attribute;
     let { innerRadius = arcAttribute.innerRadius, outerRadius = arcAttribute.outerRadius } = arc.attribute;
     outerRadius += outerPadding;
@@ -66,7 +67,7 @@ export class DefaultArcRenderContribution implements IArcRenderContribution {
       const doStroke = !!(borderStyle && borderStyle.stroke);
 
       const { distance = arcAttribute[key].distance } = borderStyle;
-      const d = getScaledStroke(context, distance as number, context.dpr);
+      const d = keepStrokeScale ? (distance as number) : getScaledStroke(context, distance as number, context.dpr);
       const deltaAngle = (distance as number) / outerRadius;
       const sign = key === 'outerBorder' ? 1 : -1;
       arc.setAttributes({

packages/vrender-core/src/render/contributions/render/contributions/circle-contribution-render.ts

@@ -54,14 +54,15 @@ export class DefaultCircleRenderContribution implements ICircleRenderContributio
       x: originX = circleAttribute.x,
       y: originY = circleAttribute.y,
       scaleX = circleAttribute.scaleX,
-      scaleY = circleAttribute.scaleY
+      scaleY = circleAttribute.scaleY,
+      keepStrokeScale = circleAttribute.keepStrokeScale
     } = circle.attribute;
 
     const renderBorder = (borderStyle: Partial<IBorderStyle>, key: 'outerBorder' | 'innerBorder') => {
       const doStroke = !!(borderStyle && borderStyle.stroke);
 
       const { distance = circleAttribute[key].distance } = borderStyle;
-      const d = getScaledStroke(context, distance as number, context.dpr);
+      const d = keepStrokeScale ? (distance as number) : getScaledStroke(context, distance as number, context.dpr);
       const sign = key === 'outerBorder' ? 1 : -1;
       context.beginPath();
       context.arc(x, y, radius + sign * d, startAngle, endAngle);

packages/vrender-core/src/render/contributions/render/contributions/rect-contribution-render.ts

@@ -57,7 +57,8 @@ export class DefaultRectRenderContribution implements IRectRenderContribution {
       scaleX = rectAttribute.scaleX,
       scaleY = rectAttribute.scaleY,
       x1,
-      y1
+      y1,
+      keepStrokeScale = rectAttribute.keepStrokeScale
     } = rect.attribute;
 
     let { width, height } = rect.attribute;
@@ -70,7 +71,7 @@ export class DefaultRectRenderContribution implements IRectRenderContribution {
 
       const sign = key === 'outerBorder' ? -1 : 1;
       const { distance = rectAttribute[key].distance } = borderStyle;
-      const d = getScaledStroke(context, distance as number, context.dpr);
+      const d = keepStrokeScale ? (distance as number) : getScaledStroke(context, distance as number, context.dpr);
       const nextX = x + sign * d;
       const nextY = y + sign * d;
       const dw = d * 2;

packages/vrender-core/src/render/contributions/render/contributions/symbol-contribution-render.ts

@@ -59,14 +59,15 @@ export class DefaultSymbolRenderContribution implements ISymbolRenderContributio
       x: originX = symbolAttribute.x,
       y: originY = symbolAttribute.y,
       scaleX = symbolAttribute.scaleX,
-      scaleY = symbolAttribute.scaleY
+      scaleY = symbolAttribute.scaleY,
+      keepStrokeScale = symbolAttribute.keepStrokeScale
     } = symbol.attribute;
 
     const renderBorder = (borderStyle: Partial<IBorderStyle>, key: 'outerBorder' | 'innerBorder') => {
       const doStroke = !!(borderStyle && borderStyle.stroke);
 
       const { distance = symbolAttribute[key].distance } = borderStyle;
-      const d = getScaledStroke(context, distance as number, context.dpr);
+      const d = keepStrokeScale ? (distance as number) : getScaledStroke(context, distance as number, context.dpr);
       const sign = key === 'outerBorder' ? 1 : -1;
 
       context.beginPath();

packages/vrender-kits/src/canvas/contributions/browser/context.ts

@@ -1136,9 +1136,10 @@ export class BrowserContext2d implements IContext2d {
         lineJoin = defaultParams.lineJoin,
         lineDash = defaultParams.lineDash,
         lineCap = defaultParams.lineCap,
-        miterLimit = defaultParams.miterLimit
+        miterLimit = defaultParams.miterLimit,
+        keepStrokeScale = defaultParams.keepStrokeScale
       } = attribute;
-      _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr);
+      _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr);
       _context.strokeStyle = createColor(this, stroke as any, params, offsetX, offsetY);
       _context.lineJoin = lineJoin;
       lineDash && _context.setLineDash(lineDash);

packages/vrender-kits/src/canvas/contributions/harmony/context.ts

@@ -60,10 +60,11 @@ export class HarmonyContext2d extends BrowserContext2d implements IContext2d {
         lineJoin = defaultParams.lineJoin,
         lineDash = defaultParams.lineDash,
         lineCap = defaultParams.lineCap,
-        miterLimit = defaultParams.miterLimit
+        miterLimit = defaultParams.miterLimit,
+        keepStrokeScale = defaultParams.keepStrokeScale
       } = attribute;
       _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha;
-      _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr);
+      _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr);
       _context.strokeStyle = createColor(this, stroke as any, params, offsetX, offsetY);
       _context.lineJoin = lineJoin;
       // lynx环境中lineDash不能为[0, 0]

packages/vrender-kits/src/canvas/contributions/lynx/context.ts

@@ -53,10 +53,11 @@ export class LynxContext2d extends BrowserContext2d implements IContext2d {
         lineJoin = defaultParams.lineJoin,
         lineDash = defaultParams.lineDash,
         lineCap = defaultParams.lineCap,
-        miterLimit = defaultParams.miterLimit
+        miterLimit = defaultParams.miterLimit,
+        keepStrokeScale = defaultParams.keepStrokeScale
       } = attribute;
       _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha;
-      _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr);
+      _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr);
       _context.strokeStyle = createColor(this, stroke as any, params, offsetX, offsetY);
       _context.lineJoin = lineJoin;
       // lynx环境中lineDash不能为[0, 0]

packages/vrender-kits/src/canvas/contributions/taro/context.ts

@@ -101,10 +101,11 @@ export class TaroContext2d extends BrowserContext2d implements IContext2d {
         lineJoin = defaultParams.lineJoin,
         lineDash = defaultParams.lineDash,
         lineCap = defaultParams.lineCap,
-        miterLimit = defaultParams.miterLimit
+        miterLimit = defaultParams.miterLimit,
+        keepStrokeScale = defaultParams.keepStrokeScale
       } = attribute;
       _context.setGlobalAlpha(strokeOpacity * opacity);
-      _context.setLineWidth(getScaledStroke(this, lineWidth, this.dpr));
+      _context.setLineWidth(keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr));
       _context.setStrokeStyle(createColor(this, stroke as any, params, offsetX, offsetY));
       _context.setLineJoin(lineJoin);
       lineDash && _context.setLineDash(lineDash);

packages/vrender-kits/src/picker/contributions/canvas-picker/symbol-picker.ts

@@ -107,7 +107,10 @@ export class DefaultCanvasSymbolPicker extends Base3dPicker<ISymbol> implements
         }
         const lineWidth = symbolAttribute.lineWidth || themeAttribute.lineWidth;
         const pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-        pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
+        const keepStrokeScale = symbolAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+        pickContext.lineWidth = keepStrokeScale
+          ? lineWidth + pickStrokeBuffer
+          : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
         picked = context.isPointInStroke(pickPoint.x, pickPoint.y);
         return picked;
       }

packages/vrender-kits/src/picker/contributions/common/base-line-picker.ts

@@ -70,7 +70,10 @@ export abstract class BaseLinePicker<T extends IGraphic<Partial<IGraphicAttribut
         }
         const lineWidth = lineAttribute.lineWidth || themeAttribute.lineWidth;
         const pickStrokeBuffer = lineAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-        pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
+        const keepStrokeScale = lineAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+        pickContext.lineWidth = keepStrokeScale
+          ? lineWidth + pickStrokeBuffer
+          : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
         picked = context.isPointInStroke(pickPoint.x, pickPoint.y);
         return picked;
       }

packages/vrender-kits/src/picker/contributions/common/base.ts

@@ -75,7 +75,10 @@ export abstract class PickerBase {
         }
         const lineWidth = arcAttribute.lineWidth || themeAttribute.lineWidth;
         const pickStrokeBuffer = arcAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-        pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
+        const keepStrokeScale = arcAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+        pickContext.lineWidth = keepStrokeScale
+          ? lineWidth + pickStrokeBuffer
+          : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
         picked = context.isPointInStroke(point.x, point.y);
         return picked;
       }

packages/vrender-kits/src/picker/contributions/common/picker-utils.ts

@@ -16,6 +16,9 @@ export const commonStrokeCb = (
 ) => {
   const lineWidth = symbolAttribute.lineWidth || themeAttribute.lineWidth;
   const pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-  pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
+  const keepStrokeScale = symbolAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+  pickContext.lineWidth = keepStrokeScale
+    ? lineWidth + pickStrokeBuffer
+    : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
   return context.isPointInStroke(pickPoint.x, pickPoint.y);
 };

packages/vrender-kits/src/picker/contributions/common/rect-picker-base.ts

@@ -93,7 +93,10 @@ export class RectPickerBase {
           }
           const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth;
           const pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-          pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
+          const keepStrokeScale = rectAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+          pickContext.lineWidth = keepStrokeScale
+            ? lineWidth + pickStrokeBuffer
+            : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
           picked = context.isPointInStroke(point.x, point.y);
           return picked;
         }

packages/vrender/__tests__/browser/src/pages/symbol.ts

@@ -105,7 +105,10 @@ export const page = () => {
       lineCap: 'round',
       fill: 'pink',
       fillStrokeOrder: 1,
-      size: 40
+      size: 40,
+      scaleX: 2,
+      scaleY: 2,
+      keepStrokeScale: true
     });
     const text = createText({
       x: x,