自定义绘制图形问题

[ZackFair5185034]

我想 重写Line的绘制逻辑,使线画出 管道的效果,相当于在线段上绘制两次,我在自定义draw函数中连续调用了两次父级的绘制, 在第一次调用后设置虚线效果在绘制,再重置属性,但是这样会导致该函数循环调用,我想到的是完全重写绘制逻辑,这样我可能还需要完全实现,例如阴影等这些其他效果,有其他更好的方式吗? 代码如下 // #自定义元素 [自定义线条] import { affectStrokeBoundsType, dataProcessor, type ILineData, type ILineInputData, Line, PathBounds, registerUI, surfaceType } from 'leafer-ui' import { type ILeaferCanvas, type IStrokeAlign } from '@leafer-ui/interface' import { boundsType, LineData } from '@leafer-ui/core'

// 定义数据 interface ICustomLineInputData extends ILineInputData { isPipe?: boolean // 是否是管道 }

interface ICustomLineData extends ILineData { isPipe?: boolean // 是否是管道 }

class CustomLineData extends LineData implements ICustomLineData { _isPipe?: boolean

setIsPipe(value: boolean): void { console.log('xxx') this._isPipe = value } }

@registerUI() export class CustomLine extends Line { // 画非闭合的线条，需要修改 strokeAlign 默认值为 ‘center’（UI默认是内描边） @affectStrokeBoundsType('center') declare public strokeAlign: IStrokeAlign

@dataProcessor(CustomLineData) declare public __: CustomLineData

@boundsType(false) declare public isPipe: boolean

constructor(data: ICustomLineInputData) { super(data)

// ...

}

public get __tag() { return 'CustomLine' }

public draw(canvas: ILeaferCanvas) { const { stroke, dashPattern, strokeWidth } = this. as any console.log('画管道!!!', stroke) super.__draw(canvas, {}) this.set({ stroke: 'red', dashPattern: [10, 5], strokeWidth: strokeWidth - 5 }) super.__draw(canvas, {}) // this.set({ stroke, dashPattern, strokeWidth }) this.setAttr('stroke', stroke) this.setAttr('dashPattern', dashPattern) this.setAttr('strokeWidth', strokeWidth) }

// 2. (可选）如果通过width、height属性无法确定图形 bounds，需要override此函数，从路径中获取 bounds public updateBoxBounds(): void { PathBounds.toBounds(this..path, this.__layout.boxBounds) } }

[leaferjs]

draw方法中不能设置数据属性（会导致不断循环调用），只能读取数据属性，建议继承Pen绘制两条线条

[ZackFair5185034]

已经解决了 我采用了下面的方式 public draw(canvas: ILeaferCanvas) { const { stroke, dashPattern, strokeWidth } = this. as any super.__draw(canvas, {}) this.___['stroke']='red' //这样赋值不会触发draw ..... .... super.draw(canvas, {}) this.['stroke']=stroke //重置属性 ..... .... }