diff --git a/src/chart/custom.js b/src/chart/custom.js
index 726c48a58fd5fda43c355d6fdef1f39325f98faf..89378b436d7d6339015195bec0c59bd057acb942 100644
--- a/src/chart/custom.js
+++ b/src/chart/custom.js
@@ -116,14 +116,43 @@ define(function (require) {
function createEl(elOption) {
var graphicType = elOption.type;
+ var el;
+
+ if (graphicType === 'path') {
+ var shape = elOption.shape;
+ el = graphicUtil.makePath(
+ shape.pathData,
+ null,
+ {
+ x: shape.x || 0,
+ y: shape.y || 0,
+ width: shape.width || 0,
+ height: shape.height || 0
+ },
+ 'center'
+ );
+ el.__customPathData = elOption.pathData;
+ }
+ else if (graphicType === 'image') {
+ el = new graphicUtil.Image({
+ });
+ el.__customImagePath = elOption.style.image;
+ }
+ else if (graphicType === 'text') {
+ el = new graphicUtil.Text({
+ });
+ el.__customText = elOption.style.text;
+ }
+ else {
+ var Clz = graphicUtil[graphicType.charAt(0).toUpperCase() + graphicType.slice(1)];
- var Clz = graphicUtil[graphicType.charAt(0).toUpperCase() + graphicType.slice(1)];
+ if (__DEV__) {
+ zrUtil.assert(Clz, 'graphic type "' + graphicType + '" can not be found.');
+ }
- if (__DEV__) {
- zrUtil.assert(Clz, 'graphic type "' + graphicType + '" can not be found.');
+ el = new Clz();
}
- var el = new Clz();
el.__customGraphicType = graphicType;
return el;
@@ -131,6 +160,7 @@ define(function (require) {
function updateEl(el, dataIndex, elOption, animatableModel, data, isInit) {
var targetProps = {};
+ var elOptionStyle = elOption.style || {};
elOption.shape && (targetProps.shape = zrUtil.clone(elOption.shape));
elOption.position && (targetProps.position = elOption.position.slice());
@@ -138,15 +168,21 @@ define(function (require) {
elOption.origin && (targetProps.origin = elOption.origin.slice());
elOption.rotation && (targetProps.rotation = elOption.rotation);
- if (isInit) {
- el.attr(targetProps);
+ if (el.type === 'image' && elOption.style) {
+ var targetStyle = targetProps.style = {};
+ zrUtil.each(['x', 'y', 'width', 'height'], function (prop) {
+ prepareStyleTransition(prop, targetStyle, elOptionStyle, el.style, isInit);
+ });
}
- else {
- graphicUtil.updateProps(el, targetProps, animatableModel, dataIndex);
+
+ if (el.type === 'text' && elOption.style) {
+ var targetStyle = targetProps.style = {};
+ zrUtil.each(['x', 'y'], function (prop) {
+ prepareStyleTransition(prop, targetStyle, elOptionStyle, el.style, isInit);
+ });
}
if (el.type !== 'group') {
- var elOptionStyle = elOption.style || {};
el.useStyle(elOptionStyle);
// Init animation.
@@ -158,13 +194,26 @@ define(function (require) {
}
}
- el.type === 'image' && el.attr('image', elOption.image);
+ if (isInit) {
+ el.attr(targetProps);
+ }
+ else {
+ graphicUtil.updateProps(el, targetProps, animatableModel, dataIndex);
+ }
+
// z2 must not be null/undefined, otherwise sort error may occur.
el.attr({z2: elOption.z2 || 0, silent: elOption.silent});
el.styleEmphasis !== false && graphicUtil.setHoverStyle(el, el.styleEmphasis);
}
+ function prepareStyleTransition(prop, targetStyle, elOptionStyle, oldElStyle, isInit) {
+ if (elOptionStyle[prop] != null && !isInit) {
+ targetStyle[prop] = elOptionStyle[prop];
+ elOptionStyle[prop] = oldElStyle[prop];
+ }
+ }
+
function makeRenderItem(customSeries, data, ecModel, api) {
var renderItem = customSeries.get('renderItem');
var coordSys = customSeries.coordinateSystem;
@@ -186,7 +235,8 @@ define(function (require) {
styleEmphasis: styleEmphasis,
visual: visual,
barLayout: barLayout,
- currentSeriesIndices: currentSeriesIndices
+ currentSeriesIndices: currentSeriesIndices,
+ font: font
}, prepareResult.api);
var userParams = {
@@ -326,6 +376,19 @@ define(function (require) {
function currentSeriesIndices() {
return ecModel.getCurrentSeriesIndices();
}
+
+ /**
+ * @public
+ * @param {Object} opt
+ * @param {string} [opt.fontStyle]
+ * @param {number} [opt.fontWeight]
+ * @param {number} [opt.fontSize]
+ * @param {string} [opt.fontFamily]
+ * @return {string} font string
+ */
+ function font(opt) {
+ return graphicUtil.getFont(opt, ecModel);
+ }
}
function wrapEncodeDef(data) {
@@ -347,13 +410,19 @@ define(function (require) {
}
function doCreateOrUpdate(el, dataIndex, elOption, animatableModel, group, data) {
- if (el && elOption.type !== el.__customGraphicType) {
+ var elOptionType = elOption.type;
+ if (el
+ && elOptionType !== el.__customGraphicType
+ && (elOptionType !== 'path' || elOption.pathData !== el.__customPathData)
+ && (elOptionType !== 'image' || elOption.style.image !== el.__customImagePath)
+ && (elOptionType !== 'text' || elOption.style.text !== el.__customText)
+ ) {
group.remove(el);
el = null;
}
// `elOption.type` is undefined when `renderItem` returns nothing.
- if (elOption.type == null) {
+ if (elOptionType == null) {
return;
}
@@ -361,7 +430,7 @@ define(function (require) {
!el && (el = createEl(elOption));
updateEl(el, dataIndex, elOption, animatableModel, data, isInit);
- elOption.type === 'group' && zrUtil.each(elOption.children, function (childOption, index) {
+ elOptionType === 'group' && zrUtil.each(elOption.children, function (childOption, index) {
doCreateOrUpdate(el.childAt(index), dataIndex, childOption, animatableModel, el, data);
});
diff --git a/src/model/mixin/textStyle.js b/src/model/mixin/textStyle.js
index f1eb7bc4c4f41b32a18fc1673e466919ccefe067..e532430c16122cdc4c2afa7f6f5b5895b2286a8c 100644
--- a/src/model/mixin/textStyle.js
+++ b/src/model/mixin/textStyle.js
@@ -1,10 +1,7 @@
define(function (require) {
var textContain = require('zrender/contain/text');
-
- function getShallow(model, path) {
- return model && model.getShallow(path);
- }
+ var graphicUtil = require('../../util/graphic');
return {
/**
@@ -22,15 +19,12 @@ define(function (require) {
* @return {string}
*/
getFont: function () {
- var ecModel = this.ecModel;
- var gTextStyleModel = ecModel && ecModel.getModel('textStyle');
- return [
- // FIXME in node-canvas fontWeight is before fontStyle
- this.getShallow('fontStyle') || getShallow(gTextStyleModel, 'fontStyle'),
- this.getShallow('fontWeight') || getShallow(gTextStyleModel, 'fontWeight'),
- (this.getShallow('fontSize') || getShallow(gTextStyleModel, 'fontSize') || 12) + 'px',
- this.getShallow('fontFamily') || getShallow(gTextStyleModel, 'fontFamily') || 'sans-serif'
- ].join(' ');
+ return graphicUtil.getFont({
+ fontStyle: this.getShallow('fontStyle'),
+ fontWeight: this.getShallow('fontWeight'),
+ fontSize: this.getShallow('fontSize'),
+ fontFamily: this.getShallow('fontFamily')
+ }, this.ecModel);
},
getTextRect: function (text) {
diff --git a/src/util/graphic.js b/src/util/graphic.js
index 8fa869bb2ec9c5a939e0a89e61f63c05d03b4127..15350f03ea44252b204f1fb2f3aefd8b12dd7001 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -410,6 +410,17 @@ define(function(require) {
});
};
+ graphic.getFont = function (opt, ecModel) {
+ var gTextStyleModel = ecModel && ecModel.getModel('textStyle');
+ return [
+ // FIXME in node-canvas fontWeight is before fontStyle
+ opt.fontStyle || gTextStyleModel && gTextStyleModel.getShallow('fontStyle') || '',
+ opt.fontWeight || gTextStyleModel && gTextStyleModel.getShallow('fontWeight') || '',
+ (opt.fontSize || gTextStyleModel && gTextStyleModel.getShallow('fontSize') || 12) + 'px',
+ opt.fontFamily || gTextStyleModel && gTextStyleModel.getShallow('fontFamily') || 'sans-serif'
+ ].join(' ');
+ };
+
function animateOrSetProps(isUpdate, el, props, animatableModel, dataIndex, cb) {
if (typeof dataIndex === 'function') {
cb = dataIndex;
diff --git a/test/custom.html b/test/custom.html
index 9d568b9fce0dbff59477080fb9df7e5097d6da18..ece829e959863b130ca648a58e33a09157773e2f 100644
--- a/test/custom.html
+++ b/test/custom.html
@@ -24,26 +24,23 @@
Profile
-
+
Histogram
-
+
Profit
-
+
Error Chart (Cartesian Bar)
-
+
Error Chart (Cartesian Scatter)
-
+
Bar layout
-
+
Cartesian Polygon
-
-
- polygon
- bar
- candlestick
-
-
-
+
+ Calendar | Path data | text
+
+ Update animation: Text | Image | Path
+
@@ -856,5 +853,291 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+