Your IP : 216.73.216.43
/**
* 图片绘制
* @module zrender/shape/Image
* @author pissang(https://www.github.com/pissang)
* @example
* var ImageShape = require('zrender/shape/Image');
* var image = new ImageShape({
* style: {
* image: 'test.jpg',
* x: 100,
* y: 100
* }
* });
* zr.addShape(image);
*/
/**
* @typedef {Object} IImageStyle
* @property {string|HTMLImageElement|HTMLCanvasElement} image 图片url或者图片对象
* @property {number} x 左上角横坐标
* @property {number} y 左上角纵坐标
* @property {number} [width] 绘制到画布上的宽度，默认为图片宽度
* @property {number} [height] 绘制到画布上的高度，默认为图片高度
* @property {number} [sx=0] 从图片中裁剪的左上角横坐标
* @property {number} [sy=0] 从图片中裁剪的左上角纵坐标
* @property {number} [sWidth] 从图片中裁剪的宽度，默认为图片高度
* @property {number} [sHeight] 从图片中裁剪的高度，默认为图片高度
* @property {number} [opacity=1] 绘制透明度
* @property {number} [shadowBlur=0] 阴影模糊度，大于0有效
* @property {string} [shadowColor='#000000'] 阴影颜色
* @property {number} [shadowOffsetX=0] 阴影横向偏移
* @property {number} [shadowOffsetY=0] 阴影纵向偏移
* @property {string} [text] 图形中的附加文本
* @property {string} [textColor='#000000'] 文本颜色
* @property {string} [textFont] 附加文本样式，eg:'bold 18px verdana'
* @property {string} [textPosition='end'] 附加文本位置, 可以是 inside, left, right, top, bottom
* @property {string} [textAlign] 默认根据textPosition自动设置，附加文本水平对齐。
* 可以是start, end, left, right, center
* @property {string} [textBaseline] 默认根据textPosition自动设置，附加文本垂直对齐。
* 可以是top, bottom, middle, alphabetic, hanging, ideographic
*/
define(
function (require) {
var Base = require('./Base');
/**
* @alias zrender/shape/Image
* @constructor
* @extends module:zrender/shape/Base
* @param {Object} options
*/
var ZImage = function(options) {
Base.call(this, options);
/**
* 图片绘制样式
* @name module:zrender/shape/Image#style
* @type {module:zrender/shape/Image~IImageStyle}
*/
/**
* 图片高亮绘制样式
* @name module:zrender/shape/Image#highlightStyle
* @type {module:zrender/shape/Image~IImageStyle}
*/
};
ZImage.prototype = {
type: 'image',
brush : function(ctx, isHighlight, refreshNextFrame) {
var style = this.style || {};
if (isHighlight) {
// 根据style扩展默认高亮样式
style = this.getHighlightStyle(
style, this.highlightStyle || {}
);
}
var image = style.image;
var self = this;
if (!this._imageCache) {
this._imageCache = {};
}
if (typeof(image) === 'string') {
var src = image;
if (this._imageCache[src]) {
image = this._imageCache[src];
} else {
image = new Image();
image.onload = function () {
image.onload = null;
self.modSelf();
refreshNextFrame();
};
image.src = src;
this._imageCache[src] = image;
}
}
if (image) {
// 图片已经加载完成
if (image.nodeName.toUpperCase() == 'IMG') {
if (window.ActiveXObject) {
if (image.readyState != 'complete') {
return;
}
}
else {
if (!image.complete) {
return;
}
}
}
// Else is canvas
var width = style.width || image.width;
var height = style.height || image.height;
var x = style.x;
var y = style.y;
// 图片加载失败
if (!image.width || !image.height) {
return;
}
ctx.save();
this.doClip(ctx);
this.setContext(ctx, style);
// 设置transform
this.setTransform(ctx);
if (style.sWidth && style.sHeight) {
var sx = style.sx || 0;
var sy = style.sy || 0;
ctx.drawImage(
image,
sx, sy, style.sWidth, style.sHeight,
x, y, width, height
);
}
else if (style.sx && style.sy) {
var sx = style.sx;
var sy = style.sy;
var sWidth = width - sx;
var sHeight = height - sy;
ctx.drawImage(
image,
sx, sy, sWidth, sHeight,
x, y, width, height
);
}
else {
ctx.drawImage(image, x, y, width, height);
}
// 如果没设置宽和高的话自动根据图片宽高设置
if (!style.width) {
style.width = width;
}
if (!style.height) {
style.height = height;
}
if (!this.style.width) {
this.style.width = width;
}
if (!this.style.height) {
this.style.height = height;
}
this.drawText(ctx, style, this.style);
ctx.restore();
}
},
/**
* 计算返回图片的包围盒矩形
* @param {module:zrender/shape/Image~IImageStyle} style
* @return {module:zrender/shape/Base~IBoundingRect}
*/
getRect: function(style) {
return {
x : style.x,
y : style.y,
width : style.width,
height : style.height
};
},
clearCache: function() {
this._imageCache = {};
}
};
require('../tool/util').inherits(ZImage, Base);
return ZImage;
}
);