From 9efcd01b94a9b6beee914b058549034557e06f31 Mon Sep 17 00:00:00 2001 From: liihuu Date: Tue, 4 Jun 2024 22:52:16 +0800 Subject: [PATCH] opt: opt render --- src/extension/figure/rect.ts | 21 +++++++++++++-------- src/store/TimeScaleStore.ts | 20 +++++++++++++------- src/view/CandleBarView.ts | 18 ++++++++++-------- 3 files changed, 36 insertions(+), 23 deletions(-) diff --git a/src/extension/figure/rect.ts b/src/extension/figure/rect.ts index 8f2b8d4fc..78c6ee4e4 100644 --- a/src/extension/figure/rect.ts +++ b/src/extension/figure/rect.ts @@ -62,10 +62,8 @@ export function drawRect (ctx: CanvasRenderingContext2D, attrs: RectAttrs | Rect } = styles // eslint-disable-next-line @typescript-eslint/unbound-method const draw = ctx.roundRect ?? ctx.rect - if ( - (style === PolygonType.Fill || styles.style === PolygonType.StrokeFill) && - (!isString(color) || !isTransparent(color)) - ) { + const solid = (style === PolygonType.Fill || styles.style === PolygonType.StrokeFill) && (!isString(color) || !isTransparent(color)) + if (solid) { ctx.fillStyle = color rects.forEach(({ x, y, width: w, height: h }) => { ctx.beginPath() @@ -76,6 +74,7 @@ export function drawRect (ctx: CanvasRenderingContext2D, attrs: RectAttrs | Rect } if ((style === PolygonType.Stroke || styles.style === PolygonType.StrokeFill) && borderSize > 0 && !isTransparent(borderColor)) { ctx.strokeStyle = borderColor + ctx.fillStyle = borderColor ctx.lineWidth = borderSize if (borderStyle === LineType.Dashed) { ctx.setLineDash(borderDashedValue) @@ -85,10 +84,16 @@ export function drawRect (ctx: CanvasRenderingContext2D, attrs: RectAttrs | Rect const correction = borderSize % 2 === 1 ? 0.5 : 0 const doubleCorrection = Math.round(correction * 2) rects.forEach(({ x, y, width: w, height: h }) => { - ctx.beginPath() - draw.call(ctx, x + correction, y + correction, w - doubleCorrection, h - doubleCorrection, r) - ctx.closePath() - ctx.stroke() + if (w > borderSize * 2 && h > borderSize * 2) { + ctx.beginPath() + draw.call(ctx, x + correction, y + correction, w - doubleCorrection, h - doubleCorrection, r) + ctx.closePath() + ctx.stroke() + } else { + if (!solid) { + ctx.fillRect(x, y, w, h) + } + } }) } } diff --git a/src/store/TimeScaleStore.ts b/src/store/TimeScaleStore.ts index 605f5d751..f0a0dd886 100644 --- a/src/store/TimeScaleStore.ts +++ b/src/store/TimeScaleStore.ts @@ -124,13 +124,19 @@ export default class TimeScaleStore { } private _calcGapBarSpace (): number { - const rateSpace = Math.floor(this._barSpace * 0.86) - const floorSpace = Math.floor(this._barSpace) - const optimalSpace = Math.min(rateSpace, floorSpace - 1) - let gapBarSpace = Math.max(1, optimalSpace) - if (gapBarSpace > 2 && gapBarSpace % 2 === 1) { + let gapBarSpace: number + if (this._barSpace > 3) { + gapBarSpace = Math.floor(this._barSpace * 0.88) + } else { + gapBarSpace = Math.floor(this._barSpace) + if (gapBarSpace === this._barSpace) { + gapBarSpace-- + } + } + if (gapBarSpace % 2 === 0) { gapBarSpace-- } + gapBarSpace = Math.max(1, gapBarSpace) return gapBarSpace } @@ -238,7 +244,7 @@ export default class TimeScaleStore { bar: this._barSpace, halfBar: this._barSpace / 2, gapBar: this._gapBarSpace, - halfGapBar: this._gapBarSpace / 2 + halfGapBar: Math.floor(this._gapBarSpace / 2) } } @@ -367,7 +373,7 @@ export default class TimeScaleStore { const dataCount = this._chartStore.getDataList().length const deltaFromRight = dataCount + this._lastBarRightSideDiffBarCount - dataIndex // return Math.floor(this._totalBarSpace - (deltaFromRight - 0.5) * this._barSpace) - 0.5 - return Math.floor(this._totalBarSpace - (deltaFromRight - 0.5) * this._barSpace + 0.5) + return Math.floor(this._totalBarSpace - (deltaFromRight - 0.5) * this._barSpace) } coordinateToDataIndex (x: number): number { diff --git a/src/view/CandleBarView.ts b/src/view/CandleBarView.ts index 47f76af31..e051bceae 100644 --- a/src/view/CandleBarView.ts +++ b/src/view/CandleBarView.ts @@ -47,12 +47,14 @@ export default class CandleBarView extends ChildrenView { const candleBarOptions = this.getCandleBarOptions(chartStore) if (candleBarOptions !== null) { let ohlcSize = 0 + let halfOhlcSize = 0 if (candleBarOptions.type === CandleType.Ohlc) { const { gapBar } = chartStore.getTimeScaleStore().getBarSpace() ohlcSize = Math.min(Math.max(Math.round(gapBar * 0.2), 1), 8) if (ohlcSize > 2 && ohlcSize % 2 === 1) { ohlcSize-- } + halfOhlcSize = Math.floor(halfOhlcSize / 2) } const yAxis = pane.getAxisComponent() this.eachChildren((data, barSpace) => { @@ -115,7 +117,7 @@ export default class CandleBarView extends ChildrenView { name: 'rect', attrs: [ { - x: x - ohlcSize / 2, + x: x - halfOhlcSize, y: priceY[0], width: ohlcSize, height: priceY[3] - priceY[0] @@ -123,13 +125,13 @@ export default class CandleBarView extends ChildrenView { { x: x - barSpace.halfGapBar, y: openY + ohlcSize > priceY[3] ? priceY[3] - ohlcSize : openY, - width: barSpace.halfGapBar - ohlcSize / 2, + width: barSpace.halfGapBar, height: ohlcSize }, { - x: x + ohlcSize / 2, + x: x + halfOhlcSize, y: closeY + ohlcSize > priceY[3] ? priceY[3] - ohlcSize : closeY, - width: barSpace.halfGapBar - ohlcSize / 2, + width: barSpace.halfGapBar - halfOhlcSize, height: ohlcSize } ], @@ -176,9 +178,9 @@ export default class CandleBarView extends ChildrenView { { name: 'rect', attrs: { - x: x - barSpace.halfGapBar + 1, + x: x - barSpace.halfGapBar, y: priceY[1], - width: barSpace.gapBar - 1, + width: barSpace.gapBar, height: Math.max(1, priceY[2] - priceY[1]) }, styles: { @@ -213,9 +215,9 @@ export default class CandleBarView extends ChildrenView { { name: 'rect', attrs: { - x: x - barSpace.halfGapBar + 1, + x: x - barSpace.halfGapBar, y: priceY[1], - width: barSpace.gapBar - 1, + width: barSpace.gapBar, height: Math.max(1, priceY[2] - priceY[1]) }, styles: {