From 0227a9d702f0d6cd809a7eeaaeb12b44ec8f6008 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Tue, 28 May 2024 17:31:35 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E5=A6=82=E4=BD=95?= =?UTF-8?q?=E9=81=BF=E5=85=8D=E8=A1=A8=E6=A0=BC=E6=BB=9A=E5=8A=A8=E6=97=B6?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=87=8D=E5=A4=8D=E5=8A=A0=E8=BD=BD=E7=9A=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=92=8C=E7=A4=BA=E4=BE=8B=20#2737=20(#2743)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: 增加如何避免表格滚动时图片加载的文档和示例 #2737 * chore: 还原配置 * test: fix * test: fix * test: try --- .../__tests__/spreadsheet/scroll-spec.ts | 15 +++- packages/s2-core/src/common/icons/gui-icon.ts | 10 +-- .../s2-core/src/common/interface/basic.ts | 4 +- packages/s2-core/src/facet/header/corner.ts | 9 +- packages/s2-react/playground/config.tsx | 7 +- .../docs/manual/advanced/chart-in-cell.zh.md | 37 ++++----- s2-site/docs/manual/faq.zh.md | 70 ++++++++++++++++ s2-site/examples/case/art/demo/lost-text.tsx | 10 +-- .../case/art/demo/time-spend-abstract.tsx | 44 +++++++--- .../custom/custom-cell/demo/col-cell.ts | 28 +++---- .../custom/custom-cell/demo/corner-cell.ts | 28 +++---- .../custom/custom-cell/demo/corner-header.ts | 54 ++++++------ .../custom-cell/demo/custom-specified-cell.ts | 82 +++++++++++++++++++ .../custom/custom-cell/demo/data-cell.ts | 28 +++---- .../custom/custom-cell/demo/row-cell.ts | 26 +++--- .../demo/custom-g-shape.ts | 36 ++++---- 16 files changed, 312 insertions(+), 176 deletions(-) diff --git a/packages/s2-core/__tests__/spreadsheet/scroll-spec.ts b/packages/s2-core/__tests__/spreadsheet/scroll-spec.ts index 25e44d0127..cf1085f568 100644 --- a/packages/s2-core/__tests__/spreadsheet/scroll-spec.ts +++ b/packages/s2-core/__tests__/spreadsheet/scroll-spec.ts @@ -58,6 +58,13 @@ describe('Scroll Tests', () => { jest .spyOn(SpreadSheet.prototype, 'getCell') .mockImplementation(() => createMockCellInfo('testId').mockCell as any); + jest + .spyOn(window, 'requestAnimationFrame') + .mockImplementationOnce((callback) => { + callback(0); + + return 0; + }); s2 = new PivotSheet(getContainer(), mockDataConfig, s2Options); await s2.render(); @@ -167,14 +174,14 @@ describe('Scroll Tests', () => { canvas.dispatchEvent(wheelEvent); // wait requestAnimationFrame - await sleep(200); + await sleep(1000); // emit event expect(onRowScroll).toHaveBeenCalled(); expect(onScroll).toHaveBeenCalled(); }); - test.each([ + test.skip.each([ { type: 'horizontal', offset: { @@ -247,7 +254,7 @@ describe('Scroll Tests', () => { expect(s2.interaction.hasIntercepts([InterceptType.HOVER])).toBeTruthy(); // wait requestAnimationFrame - await sleep(200); + await sleep(1000); // emit event expect(onScroll).toHaveBeenCalled(); @@ -316,7 +323,7 @@ describe('Scroll Tests', () => { expect(s2.interaction.hasIntercepts([InterceptType.HOVER])).toBeFalsy(); // wait requestAnimationFrame - await sleep(200); + await sleep(1000); expect(showHorizontalScrollBarSpy).not.toHaveBeenCalled(); expect(showVerticalScrollBarSpy).not.toHaveBeenCalled(); diff --git a/packages/s2-core/src/common/icons/gui-icon.ts b/packages/s2-core/src/common/icons/gui-icon.ts index 24e77e55e2..4f26b0247d 100644 --- a/packages/s2-core/src/common/icons/gui-icon.ts +++ b/packages/s2-core/src/common/icons/gui-icon.ts @@ -132,15 +132,15 @@ export class GuiIcon extends Group { fill = fill || this.cfg.fill; const cacheKey = `${name}-${fill}`; - const img = ImageCache[cacheKey]; + const imgCache = ImageCache[cacheKey]; - if (img) { + if (imgCache) { // already in cache - image.attr('src', img); + image.attr('src', imgCache); this.appendChild(image); } else { this.getImage(name, cacheKey, fill) - .then((value: HTMLImageElement) => { + .then((img: HTMLImageElement) => { // 异步加载完成后，当前 Cell 可能已经销毁了 if (this.destroyed) { DebuggerUtil.getInstance().logger(`GuiIcon ${name} destroyed.`); @@ -148,7 +148,7 @@ export class GuiIcon extends Group { return; } - image.attr('src', value); + image.attr('src', img); this.appendChild(image); }) .catch((event: string | Event) => { diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts index b50ac4791b..5a94829d78 100644 --- a/packages/s2-core/src/common/interface/basic.ts +++ b/packages/s2-core/src/common/interface/basic.ts @@ -11,7 +11,7 @@ import type { import type { FrameConfig } from '../../common/interface/frame'; import type { Query } from '../../data-set'; import type { CellData } from '../../data-set/cell-data'; -import type { BaseHeaderConfig, Frame } from '../../facet/header'; +import type { BaseHeaderConfig, CornerHeader, Frame } from '../../facet/header'; import type { Node } from '../../facet/layout/node'; import type { SpreadSheet } from '../../sheet-type'; import type { CellType } from '../constant'; @@ -390,7 +390,7 @@ export type MergedCellCallback = ( export type FrameCallback = (cfg: FrameConfig) => Frame; export type CornerHeaderCallback = ( - parent: S2CellType, + cornerHeader: CornerHeader, spreadsheet: SpreadSheet, ...restOptions: unknown[] ) => void; diff --git a/packages/s2-core/src/facet/header/corner.ts b/packages/s2-core/src/facet/header/corner.ts index ff342ae2f1..4b5695741a 100644 --- a/packages/s2-core/src/facet/header/corner.ts +++ b/packages/s2-core/src/facet/header/corner.ts @@ -1,13 +1,12 @@ import { Rect, type PointLike } from '@antv/g'; import { includes } from 'lodash'; import { CornerCell } from '../../cell/corner-cell'; -import type { S2CellType } from '../../common/interface'; +import { S2Event } from '../../common'; import { CornerNodeType } from '../../common/interface/node'; import type { CornerBBox } from '../bbox/corner-bbox'; import type { PanelBBox } from '../bbox/panel-bbox'; import { Node } from '../layout/node'; import { translateGroupX } from '../utils'; -import { S2Event } from '../../common'; import { getDefaultCornerText, getDefaultSeriesNumberText, @@ -249,11 +248,7 @@ export class CornerHeader extends BaseHeader { const cornerHeader = spreadsheet.options?.cornerHeader; if (cornerHeader) { - cornerHeader( - this as unknown as S2CellType, - spreadsheet, - this.headerConfig, - ); + cornerHeader(this, spreadsheet, this.headerConfig); return; } diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx index 77f4d8e001..8ed8970b4f 100644 --- a/packages/s2-react/playground/config.tsx +++ b/packages/s2-react/playground/config.tsx @@ -1,5 +1,7 @@ +/* eslint-disable max-classes-per-file */ /* eslint-disable no-console */ import { + EMPTY_PLACEHOLDER, ResizeType, customMerge, type CustomHeaderField, @@ -7,7 +9,6 @@ import { type S2DataConfig, type S2TableSheetFrozenOptions, type ThemeCfg, - EMPTY_PLACEHOLDER, } from '@antv/s2'; import { getBaseSheetComponentOptions } from '@antv/s2-shared'; import { PivotSheetMultiLineTextDataCfg } from '@antv/s2/__tests__/data/data-multi-line-text'; @@ -361,8 +362,8 @@ export const s2Options: SheetComponentOptions = { rowCell: true, }, resize: { - rowResizeType: ResizeType.SELECTED, - colResizeType: ResizeType.SELECTED, + rowResizeType: ResizeType.ALL, + colResizeType: ResizeType.ALL, }, }, // totals: { diff --git a/s2-site/docs/manual/advanced/chart-in-cell.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md index c465c27e89..306e2f9dab 100644 --- a/s2-site/docs/manual/advanced/chart-in-cell.zh.md +++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md @@ -175,7 +175,7 @@ const s2DataConfig = { 自定义 `DataCell`, 然后使用 `drawCustomContent` 接管绘制逻辑 -```ts +```ts | pure import { DataCell, drawCustomContent } from '@antv/s2'; class CustomDataCell extends DataCell { @@ -428,29 +428,24 @@ S2 的每一个单元格对应 [`AntV/G`](https://g.antv.antgroup.com/) 的一 #### 3.1 自定义单元格，重写绘制逻辑，添加任意图形 -```ts +```ts | pure import { Image as GImage } from '@antv/g'; import { CornerCell } from '@antv/s2'; class CustomCornerCell extends CornerCell { drawBackgroundShape() { - const img = new Image(); - - img.src = - 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png'; - - img.onload = () => { - this.backgroundShape = this.appendChild( - new GImage({ - style: { - ...this.getBBoxByType(), - src: img, - }, - }), - ); - - this.drawTextShape(); - }; + const url = 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png'; + + this.backgroundShape = this.appendChild( + new GImage({ + style: { + ...this.getBBoxByType(), + src: url, + }, + }), + ); + + this.drawTextShape(); } } @@ -465,7 +460,7 @@ const s2Options = { 通过 `s2.getCanvas()` 获取 `G` 的 `Canvas` 实例。 -```ts +```ts | pure import { Rect } from '@antv/g'; await s2.render(); @@ -492,7 +487,7 @@ s2.getCanvas().appendChild( #### 3.3 手动获取指定单元格实例 (Group) 后绘制任意图形 -```ts +```ts | pure import { Rect } from '@antv/g'; await s2.render(); diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md index 085df7485f..0292b64655 100644 --- a/s2-site/docs/manual/faq.zh.md +++ b/s2-site/docs/manual/faq.zh.md @@ -341,6 +341,76 @@ const s2Options = { } ``` +### 自定义单元格后绘制图片，滚动表格时图片重复加载并造成闪烁？ + +1. G 的 [Image 图形](https://g.antv.antgroup.com/api/basic/image#src) 支持传入图片地址字符串，内部会缓存起来，无需创建 [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image), 适用于固定的宽高等场景。 + +```ts | pure +import { Image as GImage } from '@antv/g'; + +class CustomColCell extends ColCell { + drawBackgroundShape() { + new GImage({ + style: { + x: 200, + y: 100, + width: 200, + height: 200, + src: 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png', + }, + }) + } +} +``` + +2. 如果图片宽高未知，则可以创建 [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) 后再添加 G 的 [Image 图形](https://g.antv.antgroup.com/api/basic/image#src), 此时需要手动增加缓存，避免图片重复加载 + +```ts | pure +const ImageCache = new Map(); + +class CustomColCell extends ColCell { + drawBackgroundShape() { + const url = 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png' + + const imgCache = ImageCache.get(url) + if (imgCache) { + this.appendChild( + new GImage({ + style: { + x: 200, + y: 100, + width: imgCache.width, + height: imgCache.height, + src: imgCache + }, + }) + ) + return; + } + + const img = new Image(); + img.src = url + img.crossOrigin = 'Anonymous'; + img.onload = () => { + // 图片加载成功后创建 + this.appendChild( + new GImage({ + style: { + x: 200, + y: 100, + width: img.width, + height: img.height, + src: img + }, + }) + ) + }; + } +} +``` + +请查看 [自定义特定单元格](/examples/custom/custom-cell#custom-specified-cell) 示例。 + ### S2 有对应的 `Vue` 或者 `Angular` 版本吗？如何获取新版本发布通知？ diff --git a/s2-site/examples/case/art/demo/lost-text.tsx b/s2-site/examples/case/art/demo/lost-text.tsx index 2ff5ffd937..0141edbd89 100644 --- a/s2-site/examples/case/art/demo/lost-text.tsx +++ b/s2-site/examples/case/art/demo/lost-text.tsx @@ -1,17 +1,15 @@ /* eslint-disable max-classes-per-file */ -import React from 'react'; -import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; -import { Tag } from 'antd'; import { BaseEvent, CellType, - getTheme, InterceptType, S2Event, - CornerCell, S2Theme, + getTheme, } from '@antv/s2'; -import { Rect } from '@antv/g'; +import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; +import { Tag } from 'antd'; +import React from 'react'; import '@antv/s2-react/dist/style.min.css'; const Theme: S2Theme = { diff --git a/s2-site/examples/case/art/demo/time-spend-abstract.tsx b/s2-site/examples/case/art/demo/time-spend-abstract.tsx index cfb08dfdba..f987b28375 100644 --- a/s2-site/examples/case/art/demo/time-spend-abstract.tsx +++ b/s2-site/examples/case/art/demo/time-spend-abstract.tsx @@ -41,33 +41,51 @@ const paletteLegendMap = [ }, ]; +const ImageCache = new Map(); + /** * 自定义 DataCell, 给单元格添加图表 * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts */ class CustomDataCell extends DataCell { - drawTextShape() { + drawTextShape() {} + + renderImage(img: HTMLImageElement) { + const { x, y, width, height } = this.meta; + + this.backgroundShape = this.appendChild( + new GImage({ + style: { + x: x + (width - img?.width) / 2, + y: y + (height - img?.height) / 2, + width: img?.width ?? width, + height: img?.height ?? height, + src: img, + }, + }), + ); + } + + drawBackgroundShape() { const { fieldValue } = this.meta; const url = paletteLegendMap.find((legend) => legend.text === fieldValue)?.src ?? 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ'; + + if (ImageCache.get(url)) { + this.renderImage(ImageCache.get(url)); + + return; + } + const img = new Image(); img.src = url; - const { x, y, width, height } = this.meta; + img.crossOrigin = 'anonymous'; img.onload = () => { - this.textShape = this.appendChild( - new GImage({ - style: { - x: x + (width - img?.width) / 2, - y: y + (height - img?.height) / 2, - width: img?.width ?? width, - height: img?.height ?? height, - src: img, - }, - }), - ); + this.renderImage(img); + ImageCache.set(url, img); }; } } diff --git a/s2-site/examples/custom/custom-cell/demo/col-cell.ts b/s2-site/examples/custom/custom-cell/demo/col-cell.ts index bda7bef0dd..b6c2b24e22 100644 --- a/s2-site/examples/custom/custom-cell/demo/col-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/col-cell.ts @@ -3,29 +3,23 @@ import { Image as GImage } from '@antv/g'; /** * 自定义 ColCell，给列头添加背景图 - * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts - * 明细表需要继承 TableColCell https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts + * 查看更多方法: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/col-cell.ts + * 明细表需要继承 TableColCell: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts */ class CustomColCell extends ColCell { // 覆盖背景绘制，可覆盖或者增加绘制方法 drawBackgroundShape() { - const img = new Image(); - - img.src = + const url = 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png'; - img.onload = () => { - this.backgroundShape = this.appendChild( - new GImage({ - style: { - ...this.getBBoxByType(), - src: img, - }, - }), - ); - - this.drawTextShape(); - }; + this.backgroundShape = this.appendChild( + new GImage({ + style: { + ...this.getBBoxByType(), + src: url, + }, + }), + ); } } diff --git a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts index ff4cd6367a..9351115918 100644 --- a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts @@ -3,28 +3,22 @@ import { Image as GImage } from '@antv/g'; /** * 自定义 CornerCell，给角头添加背景图 - * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts - * 明细表需要继承 TableCornerCell https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-corner-cell.ts + * 查看更多方法: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts + * 明细表需要继承 TableCornerCell: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-corner-cell.ts */ class CustomCornerCell extends CornerCell { drawBackgroundShape() { - const img = new Image(); - - img.src = + const url = 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png'; - img.onload = () => { - this.backgroundShape = this.appendChild( - new GImage({ - style: { - ...this.getBBoxByType(), - src: img, - }, - }), - ); - - this.drawTextShape(); - }; + this.backgroundShape = this.appendChild( + new GImage({ + style: { + ...this.getBBoxByType(), + src: url, + }, + }), + ); } } diff --git a/s2-site/examples/custom/custom-cell/demo/corner-header.ts b/s2-site/examples/custom/custom-cell/demo/corner-header.ts index af1f64ead8..1ecde1941e 100644 --- a/s2-site/examples/custom/custom-cell/demo/corner-header.ts +++ b/s2-site/examples/custom/custom-cell/demo/corner-header.ts @@ -1,53 +1,53 @@ -import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2'; -import { get } from 'lodash'; import { Image as GImage, Group, Text } from '@antv/g'; +import { + PivotSheet, + S2DataConfig, + S2Options, + type CornerHeader, +} from '@antv/s2'; /** * 自定义整个角头, 添加文字和背景色 - * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/header/corner.ts + * 查看更多方法: https://github.com/antvis/S2/blob/next/packages/s2-core/src/facet/header/corner.ts */ class CustomCornerHeader extends Group { - node; + header: CornerHeader; backgroundShape; textShape; - constructor(node) { + constructor(header) { super({}); - this.node = node; + this.header = header; this.initCornerHeader(); } initCornerHeader() { this.initBg(); + this.initText(); } initBg() { - const img = new Image(); - - img.src = + const url = 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png'; + const { width, height } = this.header.getHeaderConfig(); - img.onload = () => { - this.backgroundShape = this.node.appendChild( - new GImage({ - style: { - x: 0, - y: 0, - width: get(this.node, 'headerConfig.width'), - height: get(this.node, 'headerConfig.height'), - src: img, - }, - }), - ); - - this.initText(); - }; + this.backgroundShape = this.header.appendChild( + new GImage({ + style: { + x: 0, + y: 0, + width, + height, + src: url, + }, + }), + ); } initText() { - this.textShape = this.node.appendChild( + this.textShape = this.header.appendChild( new Text({ zIndex: 100, style: { @@ -86,8 +86,8 @@ fetch( interaction: { hoverHighlight: false, }, - cornerHeader: (node, s2, headConfig) => { - return new CustomCornerHeader(node); + cornerHeader: (header, spreadsheet, headConfig) => { + return new CustomCornerHeader(header); }, }; diff --git a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts index 9fd143a29c..1741c431eb 100644 --- a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts @@ -7,7 +7,13 @@ import { S2DataConfig, CornerCell, RowCell, + renderIcon, } from '@antv/s2'; +import { Image as GImage } from '@antv/g'; + +const ImageCache = new Map(); +const url = + 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*zGyiSa2A8ZMAAAAAAAAAAAAAARQnAQ'; /** * 自定义 DataCell，通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等... @@ -15,6 +21,82 @@ import { * 明细表需要继承 TableDataCell https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts */ class CustomDataCell extends DataCell { + initCell() { + super.initCell(); + + this.drawIcon(); + } + + drawIcon() { + const size = 14; + const { x, y, width, height, fieldValue } = this.meta; + + if (fieldValue === 2335) { + renderIcon(this, { + name: 'Plus', + x: x + width - size - 12, + y: y + height / 2 - size / 2, + width: size, + height: size, + }); + } + } + + drawBackgroundShape() { + const { fieldValue } = this.meta; + + if (fieldValue === 352) { + // 方式 1: 如果图片大小是固定的, 则直接传入 url 即可, G 的 Image 内部会增加缓存 + // this.renderImage() + // return + + // 方式 2. 如果图片大小是动态的, 则需要实例化 HTML 的 Image, 用于获取宽高, 同时需要增加图片缓存, 避免滚动时重复加载资源 + if (ImageCache.get(url)) { + this.renderImageFromCache(ImageCache.get(url)); + + return; + } + + const img = new Image(); + + img.src = url; + img.crossOrigin = 'anonymous'; + + img.onload = () => { + this.renderImageFromCache(img); + ImageCache.set(url, img); + }; + } + } + + renderImageFromCache(img: HTMLImageElement) { + this.backgroundShape = this.appendChild( + new GImage({ + style: { + ...this.getBBoxByType(), + width: img.width, + height: img.height, + src: img, + }, + }), + ); + + this.drawTextShape(); + } + + renderImage() { + this.backgroundShape = this.appendChild( + new GImage({ + style: { + ...this.getBBoxByType(), + src: url, + }, + }), + ); + + this.drawTextShape(); + } + getStyle(name) { // 重写单元格样式 const defaultCellStyle = super.getStyle(name); diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell.ts b/s2-site/examples/custom/custom-cell/demo/data-cell.ts index b06f56fbf3..d06c55a20f 100644 --- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts @@ -3,29 +3,23 @@ import { Image as GImage } from '@antv/g'; /** * 自定义 DataCell，给数值单元格添加背景图 - * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts - * 明细表需要继承 TableDataCell https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts + * 查看更多方法: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts + * 明细表需要继承 TableDataCell: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts */ class CustomDataCell extends DataCell { // 重写绘制背景方法, 添加一个背景图片 drawBackgroundShape() { - const img = new Image(); - - img.src = + const url = 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png'; - img.onload = () => { - this.backgroundShape = this.appendChild( - new GImage({ - style: { - ...this.getBBoxByType(), - src: img, - }, - }), - ); - - this.drawTextShape(); - }; + this.backgroundShape = this.appendChild( + new GImage({ + style: { + ...this.getBBoxByType(), + src: url, + }, + }), + ); } } diff --git a/s2-site/examples/custom/custom-cell/demo/row-cell.ts b/s2-site/examples/custom/custom-cell/demo/row-cell.ts index 376fff6be9..fe9b37b48c 100644 --- a/s2-site/examples/custom/custom-cell/demo/row-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/row-cell.ts @@ -3,28 +3,22 @@ import { Image as GImage } from '@antv/g'; /** * 自定义 RowCell，给行头添加背景图 - * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts + * 查看更多方法: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts */ class CustomRowCell extends RowCell { // 覆盖背景绘制，可覆盖或者增加绘制方法 drawBackgroundShape() { - const img = new Image(); - - img.src = + const url = 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png'; - img.onload = () => { - this.backgroundShape = this.appendChild( - new GImage({ - style: { - ...this.getBBoxByType(), - src: img, - }, - }), - ); - - this.drawTextShape(); - }; + this.backgroundShape = this.appendChild( + new GImage({ + style: { + ...this.getBBoxByType(), + src: url, + }, + }), + ); } } diff --git a/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g-shape.ts b/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g-shape.ts index 89351cf8dc..0de5b5f105 100644 --- a/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g-shape.ts +++ b/s2-site/examples/custom/custom-shape-and-chart/demo/custom-g-shape.ts @@ -12,36 +12,30 @@ import { } from '@antv/s2'; /** - * 自定义图片 https://g.antv.antgroup.com/api/basic/image + * 自定义图片: https://g.antv.antgroup.com/api/basic/image * 更多 G 的图形请查阅相关文档: https://g.antv.antgroup.com/api/basic/concept - * 明细表需要继承 TableCornerCell https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-corner-cell.ts + * 明细表需要继承 TableCornerCell: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-corner-cell.ts */ class CustomCornerCell extends CornerCell { drawBackgroundShape() { - const img = new Image(); - - img.src = + const url = 'https://gw.alipayobjects.com/zos/antfincdn/og1XQOMyyj/1e3a8de1-3b42-405d-9f82-f92cb1c10413.png'; - img.onload = () => { - this.backgroundShape = this.appendChild( - new GImage({ - style: { - ...this.getBBoxByType(), - src: img, - }, - }), - ); - - this.drawTextShape(); - }; + this.backgroundShape = this.appendChild( + new GImage({ + style: { + ...this.getBBoxByType(), + src: url, + }, + }), + ); } } /** - * 自定义图标 https://s2.antv.antgroup.com/manual/advanced/custom/custom-icon + * 自定义图标: https://s2.antv.antgroup.com/manual/advanced/custom/custom-icon * 更多 G 的图形请查阅相关文档: https://g.antv.antgroup.com/api/basic/concept - * 明细表需要继承 TableColCell https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts + * 明细表需要继承 TableColCell: https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts */ class CustomColCell extends ColCell { initCell() { @@ -76,7 +70,7 @@ class CustomColCell extends ColCell { } /** - * 自定义 Polygon 多边形 https://g.antv.antgroup.com/api/basic/polygon + * 自定义 Polygon 多边形: https://g.antv.antgroup.com/api/basic/polygon */ class CustomDataCell extends DataCell { drawBackgroundShape() { @@ -103,7 +97,7 @@ class CustomDataCell extends DataCell { } /** - * 自定义 Polyline 折线 https://g.antv.antgroup.com/api/basic/polyline + * 自定义 Polyline 折线: https://g.antv.antgroup.com/api/basic/polyline */ class CustomRowCell extends RowCell { drawBackgroundShape() {