You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/07/21 11:27:15 UTC
[incubator-echarts] branch optimize-style updated: fix(symbol): fix
image symbol not display bug
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 <bm...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org