This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/echarts-custom-series.git
commit 8ad952ebabcba69ce1b36320e6a691516276b4c1 Author: Ovilia <[email protected]> AuthorDate: Fri Oct 11 10:22:04 2024 +0800 refactor(stage): using compoundPath --- custom-series/stage/src/index.ts | 190 ++++++++++++++++----------------------- 1 file changed, 76 insertions(+), 114 deletions(-) diff --git a/custom-series/stage/src/index.ts b/custom-series/stage/src/index.ts index d365229..b4cfe02 100644 --- a/custom-series/stage/src/index.ts +++ b/custom-series/stage/src/index.ts @@ -51,16 +51,6 @@ interface StageItemPayload { envelope?: Envelope; } -interface MyPathProps {} - -class MyPath { - constructor() {} - - buildPath(ctx: CanvasRenderingContext2D) { - console.log('build', ctx); - } -} - const renderItem = ( params: echarts.CustomSeriesRenderItemParams, api: echarts.CustomSeriesRenderItemAPI @@ -164,35 +154,32 @@ const renderItem = ( const envelope: Envelope = itemPayload.envelope || {}; if (envelope.show !== false && boxes.length > 1) { - const envelopePaths: Path[] = []; - const envelopeDebugPaths: Path[] = []; + const envelopePaths: CustomElementOption[] = []; const margin = echarts.zrUtil.retrieve2(envelope.margin as number, 2); // Sort boxes by x, then by y boxes.sort((a, b) => a.x - b.x || a.y - b.y); - const coordSys = params.coordSys as any; - // const dpr = envelope.dpr == null ? 2 : envelope.dpr || 1; - // const canvasWidth = coordSys.width; - // const canvasHeight = coordSys.height; - // const canvas = createCanvas(canvasWidth, canvasHeight); - // const ox = coordSys.x; - // const oy = coordSys.y; - - // const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; + let envelopeFill: any = envelope.color || '#888'; if (allColors.length > 0 && !envelope.color) { - // const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight); - // for (let i = 0; i < allColors.length; i++) { - // // For example, if there are 4 colors, the gradient stops are 1/8, - // // 3/8, 5/8, 7/8. - // gradient.addColorStop( - // (i * 2 + 1) / (allColors.length * 2), - // allColors[i] - // ); - // } - // ctx.fillStyle = gradient; - } else { - // ctx.fillStyle = envelope.color || '#888'; + const stops: { offset: number; color: string }[] = []; + for (let i = 0; i < allColors.length; i++) { + // For example, if there are 4 colors, the gradient stops are 1/8, + // 3/8, 5/8, 7/8. + stops.push({ + offset: (i * 2 + 1) / (allColors.length * 2), + color: allColors[i], + }); + } + envelopeFill = { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + global: false, + colorStops: stops, + }; } const opacity = zrUtil.retrieve2(envelope.opacity as number, 0.25); @@ -238,78 +225,67 @@ const renderItem = ( envelopePaths.push({ type: 'path', shape: { - pathData: `M${right},${bottom + r}A${r},${r},0,0,1,${ - right - r - },${bottom}L${right},${bottom + margin}L${right},${ + pathData: `M${right - r} ${bottom}A${r} ${r} 0 0 0 ${right} ${ bottom - r - }Z`, + }L${right},${bottom + margin}L${right - r},${bottom}Z`, }, }); - // const path = ((right, bottom, r, margin) => { - // return { - // buildPath: (ctx) => { - // ctx.moveTo(right, bottom + r); - // ctx.arc(right - r, bottom + r, r, 0, Math.PI / 2); - // ctx.lineTo(right, bottom + margin); - // ctx.lineTo(right, bottom - r); - // }, - // }; - // })(right, bottom, r, margin); - // envelopeDebugPaths.push(path); + } + if (box.x + box.width - prevBox.x - prevBox.width - margin > 0) { + const top = box.y + box.height + margin; + const left = Math.floor(prevBox.x + prevBox.width + margin); + const r = Math.min( + (box.x + box.width - prevBox.x - prevBox.width - margin) / 2, + externalRadius + ); - // ctx.moveTo(right, bottom + r); - // ctx.arc(right - r, bottom - r, r, 0, Math.PI / 2); - // ctx.lineTo(right, bottom + margin); - // ctx.lineTo(right, bottom - r); + envelopePaths.push({ + type: 'path', + shape: { + pathData: `M${left + r} ${top}A${r} ${r} 0 0 0 ${left} ${ + top + r + }L${left},${top - margin}L${left + r},${top}Z`, + }, + }); } - } + } else { + if (box.x - margin - prevBox.x > 0) { + const right = Math.ceil(box.x - margin); + const top = prevBox.y + prevBox.height + margin; + const r = Math.min( + (box.x - margin - prevBox.x) / 2, + externalRadius + ); - // if (box.x + box.width - prevBox.x - prevBox.width - margin > 0) { - // const top = (box.y + box.height + margin); - // const left = Math.floor( - // (prevBox.x + prevBox.width + margin) - // ); - // const r = - // Math.min( - // (box.x + box.width - prevBox.x - prevBox.width - margin) / 2, - // externalRadius - // ); - // ctx.moveTo(left, top + r); - // ctx.arc(left + r, top + r, r, Math.PI, Math.PI * 1.5); - // ctx.lineTo(left, top - margin); - // ctx.lineTo(left, top); - // } - // } else { - // if (box.x - margin - prevBox.x > 0) { - // const right = Math.ceil((box.x - margin)); - // const top = (prevBox.y + prevBox.height + margin); - // const r = - // Math.min((box.x - margin - prevBox.x) / 2, externalRadius) * - // dpr; - // ctx.moveTo(right, top + r); - // ctx.arc(right - r, top + r, r, -Math.PI / 2, 0, false); // Top-right corner - // ctx.lineTo(right, top - margin); - // ctx.lineTo(right - r, top); - // } + envelopePaths.push({ + type: 'path', + shape: { + pathData: `M${right} ${top + r}A${r} ${r} 0 0 0 ${ + right - r + } ${top}L${right},${top - margin}L${right},${top + r}Z`, + }, + }); + } + if (box.x + box.width - prevBox.x - prevBox.width - margin > 0) { + const bottom = box.y - margin; + const left = Math.floor(prevBox.x + prevBox.width + margin); + const r = Math.min( + (box.x + box.width - prevBox.x - prevBox.width - margin) / 2, + externalRadius + ); - // if (box.x + box.width - prevBox.x - prevBox.width - margin > 0) { - // const bottom = (box.y - margin); - // const left = Math.floor( - // (prevBox.x + prevBox.width + margin) - // ); - // const r = - // Math.min( - // (box.x + box.width - prevBox.x - prevBox.width - margin) / 2, - // externalRadius - // ); - // ctx.moveTo(left + r, bottom); - // ctx.arc(left + r, bottom - r, r, Math.PI / 2, Math.PI); - // ctx.lineTo(left, bottom + (margin + borderRadius)); - // ctx.lineTo(left + r, bottom); - // } - // } - // ctx.closePath(); - // ctx.fill(); + envelopePaths.push({ + type: 'path', + shape: { + pathData: `M${left} ${bottom - r}A${r} ${r} 0 0 0 ${ + left + r + } ${bottom}L${left},${bottom + margin}L${left},${ + bottom - r + }Z`, + }, + }); + } + } // Draw bars between boxes envelopePaths.push({ @@ -330,24 +306,10 @@ const renderItem = ( paths: envelopePaths, }, style: { - fill: envelope.color || '#888', - opacity: 0.2, - }, - silent: true, - z2: 200, - }); - - children.push({ - type: 'compoundPath', - shape: { - paths: envelopeDebugPaths, - }, - style: { - fill: envelope.color || '#f00', - opacity: 0.9, + fill: envelopeFill, + opacity, }, silent: true, - z2: 200, }); } } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
