256 lines
5.6 KiB
JavaScript
256 lines
5.6 KiB
JavaScript
var zrUtil = require("../core/util");
|
||
|
||
var Style = require("./Style");
|
||
|
||
var Element = require("../Element");
|
||
|
||
var RectText = require("./mixin/RectText");
|
||
|
||
/**
|
||
* 可绘制的图形基类
|
||
* Base class of all displayable graphic objects
|
||
* @module zrender/graphic/Displayable
|
||
*/
|
||
|
||
/**
|
||
* @alias module:zrender/graphic/Displayable
|
||
* @extends module:zrender/Element
|
||
* @extends module:zrender/graphic/mixin/RectText
|
||
*/
|
||
function Displayable(opts) {
|
||
opts = opts || {};
|
||
Element.call(this, opts); // Extend properties
|
||
|
||
for (var name in opts) {
|
||
if (opts.hasOwnProperty(name) && name !== 'style') {
|
||
this[name] = opts[name];
|
||
}
|
||
}
|
||
/**
|
||
* @type {module:zrender/graphic/Style}
|
||
*/
|
||
|
||
|
||
this.style = new Style(opts.style, this);
|
||
this._rect = null; // Shapes for cascade clipping.
|
||
|
||
this.__clipPaths = []; // FIXME Stateful must be mixined after style is setted
|
||
// Stateful.call(this, opts);
|
||
}
|
||
|
||
Displayable.prototype = {
|
||
constructor: Displayable,
|
||
type: 'displayable',
|
||
|
||
/**
|
||
* Displayable 是否为脏,Painter 中会根据该标记判断是否需要是否需要重新绘制
|
||
* Dirty flag. From which painter will determine if this displayable object needs brush
|
||
* @name module:zrender/graphic/Displayable#__dirty
|
||
* @type {boolean}
|
||
*/
|
||
__dirty: true,
|
||
|
||
/**
|
||
* 图形是否可见,为true时不绘制图形,但是仍能触发鼠标事件
|
||
* If ignore drawing of the displayable object. Mouse event will still be triggered
|
||
* @name module:/zrender/graphic/Displayable#invisible
|
||
* @type {boolean}
|
||
* @default false
|
||
*/
|
||
invisible: false,
|
||
|
||
/**
|
||
* @name module:/zrender/graphic/Displayable#z
|
||
* @type {number}
|
||
* @default 0
|
||
*/
|
||
z: 0,
|
||
|
||
/**
|
||
* @name module:/zrender/graphic/Displayable#z
|
||
* @type {number}
|
||
* @default 0
|
||
*/
|
||
z2: 0,
|
||
|
||
/**
|
||
* z层level,决定绘画在哪层canvas中
|
||
* @name module:/zrender/graphic/Displayable#zlevel
|
||
* @type {number}
|
||
* @default 0
|
||
*/
|
||
zlevel: 0,
|
||
|
||
/**
|
||
* 是否可拖拽
|
||
* @name module:/zrender/graphic/Displayable#draggable
|
||
* @type {boolean}
|
||
* @default false
|
||
*/
|
||
draggable: false,
|
||
|
||
/**
|
||
* 是否正在拖拽
|
||
* @name module:/zrender/graphic/Displayable#draggable
|
||
* @type {boolean}
|
||
* @default false
|
||
*/
|
||
dragging: false,
|
||
|
||
/**
|
||
* 是否相应鼠标事件
|
||
* @name module:/zrender/graphic/Displayable#silent
|
||
* @type {boolean}
|
||
* @default false
|
||
*/
|
||
silent: false,
|
||
|
||
/**
|
||
* If enable culling
|
||
* @type {boolean}
|
||
* @default false
|
||
*/
|
||
culling: false,
|
||
|
||
/**
|
||
* Mouse cursor when hovered
|
||
* @name module:/zrender/graphic/Displayable#cursor
|
||
* @type {string}
|
||
*/
|
||
cursor: 'pointer',
|
||
|
||
/**
|
||
* If hover area is bounding rect
|
||
* @name module:/zrender/graphic/Displayable#rectHover
|
||
* @type {string}
|
||
*/
|
||
rectHover: false,
|
||
|
||
/**
|
||
* Render the element progressively when the value >= 0,
|
||
* usefull for large data.
|
||
* @type {boolean}
|
||
*/
|
||
progressive: false,
|
||
|
||
/**
|
||
* @type {boolean}
|
||
*/
|
||
incremental: false,
|
||
// inplace is used with incremental
|
||
inplace: false,
|
||
beforeBrush: function (ctx) {},
|
||
afterBrush: function (ctx) {},
|
||
|
||
/**
|
||
* 图形绘制方法
|
||
* @param {CanvasRenderingContext2D} ctx
|
||
*/
|
||
// Interface
|
||
brush: function (ctx, prevEl) {},
|
||
|
||
/**
|
||
* 获取最小包围盒
|
||
* @return {module:zrender/core/BoundingRect}
|
||
*/
|
||
// Interface
|
||
getBoundingRect: function () {},
|
||
|
||
/**
|
||
* 判断坐标 x, y 是否在图形上
|
||
* If displayable element contain coord x, y
|
||
* @param {number} x
|
||
* @param {number} y
|
||
* @return {boolean}
|
||
*/
|
||
contain: function (x, y) {
|
||
return this.rectContain(x, y);
|
||
},
|
||
|
||
/**
|
||
* @param {Function} cb
|
||
* @param {} context
|
||
*/
|
||
traverse: function (cb, context) {
|
||
cb.call(context, this);
|
||
},
|
||
|
||
/**
|
||
* 判断坐标 x, y 是否在图形的包围盒上
|
||
* If bounding rect of element contain coord x, y
|
||
* @param {number} x
|
||
* @param {number} y
|
||
* @return {boolean}
|
||
*/
|
||
rectContain: function (x, y) {
|
||
var coord = this.transformCoordToLocal(x, y);
|
||
var rect = this.getBoundingRect();
|
||
return rect.contain(coord[0], coord[1]);
|
||
},
|
||
|
||
/**
|
||
* 标记图形元素为脏,并且在下一帧重绘
|
||
* Mark displayable element dirty and refresh next frame
|
||
*/
|
||
dirty: function () {
|
||
this.__dirty = true;
|
||
this._rect = null;
|
||
this.__zr && this.__zr.refresh();
|
||
},
|
||
|
||
/**
|
||
* 图形是否会触发事件
|
||
* If displayable object binded any event
|
||
* @return {boolean}
|
||
*/
|
||
// TODO, 通过 bind 绑定的事件
|
||
// isSilent: function () {
|
||
// return !(
|
||
// this.hoverable || this.draggable
|
||
// || this.onmousemove || this.onmouseover || this.onmouseout
|
||
// || this.onmousedown || this.onmouseup || this.onclick
|
||
// || this.ondragenter || this.ondragover || this.ondragleave
|
||
// || this.ondrop
|
||
// );
|
||
// },
|
||
|
||
/**
|
||
* Alias for animate('style')
|
||
* @param {boolean} loop
|
||
*/
|
||
animateStyle: function (loop) {
|
||
return this.animate('style', loop);
|
||
},
|
||
attrKV: function (key, value) {
|
||
if (key !== 'style') {
|
||
Element.prototype.attrKV.call(this, key, value);
|
||
} else {
|
||
this.style.set(value);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @param {Object|string} key
|
||
* @param {*} value
|
||
*/
|
||
setStyle: function (key, value) {
|
||
this.style.set(key, value);
|
||
this.dirty(false);
|
||
return this;
|
||
},
|
||
|
||
/**
|
||
* Use given style object
|
||
* @param {Object} obj
|
||
*/
|
||
useStyle: function (obj) {
|
||
this.style = new Style(obj, this);
|
||
this.dirty(false);
|
||
return this;
|
||
}
|
||
};
|
||
zrUtil.inherits(Displayable, Element);
|
||
zrUtil.mixin(Displayable, RectText); // zrUtil.mixin(Displayable, Stateful);
|
||
|
||
var _default = Displayable;
|
||
module.exports = _default; |