This is an automated email from the ASF dual-hosted git repository. shenyi pushed a commit to branch optimize-style in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/optimize-style by this push: new 6f5d9d7 fix(symbol): fix image symbol not display bug 6f5d9d7 is described below commit 6f5d9d7793279efed23e6e6cf4bb7d13a142e66b Author: pissang <bm2736...@gmail.com> AuthorDate: Tue Jul 21 19:26:50 2020 +0800 fix(symbol): fix image symbol not display bug --- src/chart/bar/PictorialBarView.ts | 14 +++++++++++++- src/chart/helper/Symbol.ts | 31 ++++++++++++++++++++++--------- src/chart/radar/RadarView.ts | 16 ++++++++++++++-- src/component/visualMap/ContinuousView.ts | 15 ++++++++++++++- src/util/graphic.ts | 6 +++--- 5 files changed, 66 insertions(+), 16 deletions(-) diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts index bf1a9d5..b4c7af5 100644 --- a/src/chart/bar/PictorialBarView.ts +++ b/src/chart/bar/PictorialBarView.ts @@ -38,6 +38,7 @@ import type Element from 'zrender/src/Element'; import { getDefaultLabel } from '../helper/labelHelper'; import { PathProps, PathStyleProps } from 'zrender/src/graphic/Path'; import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle'; +import ZRImage from 'zrender/src/graphic/Image'; const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const; @@ -888,7 +889,18 @@ function updateCommon( const blurScope = emphasisModel.get('blurScope'); eachPath(bar, function (path) { - path.useStyle(symbolMeta.style); + if (path instanceof ZRImage) { + const pathStyle = path.style; + path.useStyle(zrUtil.extend({ + // TODO other properties like dx, dy ? + image: pathStyle.image, + x: pathStyle.x, y: pathStyle.y, + width: pathStyle.width, height: pathStyle.height + }, symbolMeta.style)); + } + else { + path.useStyle(symbolMeta.style); + } const emphasisState = path.ensureState('emphasis'); emphasisState.style = emphasisStyle; diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts index fadae15..b3e9066 100644 --- a/src/chart/helper/Symbol.ts +++ b/src/chart/helper/Symbol.ts @@ -29,6 +29,7 @@ import { PathProps } from 'zrender/src/graphic/Path'; import { SymbolDrawSeriesScope, SymbolDrawItemModelOption } from './SymbolDraw'; import { extend } from 'zrender/src/core/util'; import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle'; +import ZRImage from 'zrender/src/graphic/Image'; type ECSymbol = ReturnType<typeof createSymbol>; @@ -260,18 +261,30 @@ class Symbol extends graphic.Group { const symbolStyle = data.getItemVisual(idx, 'style'); const visualColor = symbolStyle.fill; - if (symbolPath.__isEmptyBrush) { - // fill and stroke will be swapped if it's empty. - // So we cloned a new style to avoid it affecting the original style in visual storage. - // TODO Better implementation. No empty logic! - symbolPath.useStyle(extend({}, symbolStyle)); + + if (symbolPath instanceof ZRImage) { + const pathStyle = symbolPath.style; + symbolPath.useStyle(extend({ + // TODO other properties like x, y ? + image: pathStyle.image, + x: pathStyle.x, y: pathStyle.y, + width: pathStyle.width, height: pathStyle.height + }, symbolStyle)); } else { - symbolPath.useStyle(symbolStyle); - } - symbolPath.setColor(visualColor, opts && opts.symbolInnerColor); - symbolPath.style.strokeNoScale = true; + if (symbolPath.__isEmptyBrush) { + // fill and stroke will be swapped if it's empty. + // So we cloned a new style to avoid it affecting the original style in visual storage. + // TODO Better implementation. No empty logic! + symbolPath.useStyle(extend({}, symbolStyle)); + } + else { + symbolPath.useStyle(symbolStyle); + } + symbolPath.setColor(visualColor, opts && opts.symbolInnerColor); + symbolPath.style.strokeNoScale = true; + } const liftZ = data.getItemVisual(idx, 'liftZ'); const z2Origin = this._z2; if (liftZ != null) { diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts index f9f2917..a90f241 100644 --- a/src/chart/radar/RadarView.ts +++ b/src/chart/radar/RadarView.ts @@ -29,6 +29,7 @@ import { ColorString } from '../../util/types'; import GlobalModel from '../../model/Global'; import { VectorArray } from 'zrender/src/core/vector'; import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle'; +import ZRImage from 'zrender/src/graphic/Image'; function normalizeSymbolSize(symbolSize: number | number[]) { if (!zrUtil.isArray(symbolSize)) { @@ -223,8 +224,19 @@ class RadarView extends ChartView { const emphasisModel = itemModel.getModel('emphasis'); const itemHoverStyle = emphasisModel.getModel('itemStyle').getItemStyle(); symbolGroup.eachChild(function (symbolPath: RadarSymbol) { - symbolPath.useStyle(itemStyle); - symbolPath.setColor(color); + if (symbolPath instanceof ZRImage) { + const pathStyle = symbolPath.style; + symbolPath.useStyle(zrUtil.extend({ + // TODO other properties like x, y ? + image: pathStyle.image, + x: pathStyle.x, y: pathStyle.y, + width: pathStyle.width, height: pathStyle.height + }, itemStyle)); + } + else { + symbolPath.useStyle(itemStyle); + symbolPath.setColor(color); + } const pathEmphasisState = symbolPath.ensureState('emphasis'); pathEmphasisState.style = zrUtil.clone(itemHoverStyle); diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts index 2b952cd..211aec7 100644 --- a/src/component/visualMap/ContinuousView.ts +++ b/src/component/visualMap/ContinuousView.ts @@ -37,6 +37,7 @@ import { ColorString, Payload } from '../../util/types'; import { parsePercent } from 'zrender/src/contain/text'; import { setAsHighDownDispatcher, enterBlur, leaveBlur } from '../../util/states'; import { createSymbol } from '../../util/symbol'; +import ZRImage from 'zrender/src/graphic/Image'; const linearMap = numberUtil.linearMap; const each = zrUtil.each; @@ -336,7 +337,19 @@ class ContinuousView extends VisualMapView { silent: true, x: itemSize[0] / 2 }); - indicator.useStyle(visualMapModel.getModel('indicatorStyle').getItemStyle()); + const indicatorStyle = visualMapModel.getModel('indicatorStyle').getItemStyle(); + if (indicator instanceof ZRImage) { + const pathStyle = indicator.style; + indicator.useStyle(zrUtil.extend({ + // TODO other properties like x, y ? + image: pathStyle.image, + x: pathStyle.x, y: pathStyle.y, + width: pathStyle.width, height: pathStyle.height + }, indicatorStyle)); + } + else { + indicator.useStyle(indicatorStyle); + } mainGroup.add(indicator); diff --git a/src/util/graphic.ts b/src/util/graphic.ts index 124e8bf..8f039e0 100644 --- a/src/util/graphic.ts +++ b/src/util/graphic.ts @@ -186,7 +186,7 @@ export function makeImage( rect: ZRRectLike, layout?: 'center' | 'cover' ) { - const path = new ZRImage({ + const zrImg = new ZRImage({ style: { image: imageUrl, x: rect.x, @@ -200,11 +200,11 @@ export function makeImage( width: img.width, height: img.height }; - path.setStyle(centerGraphic(rect, boundingRect)); + zrImg.setStyle(centerGraphic(rect, boundingRect)); } } }); - return path; + return zrImg; } /** --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org