%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* Image element
* @module zrender/graphic/Image
*/
define(function (require) {
var Displayable = require('./Displayable');
var BoundingRect = require('../core/BoundingRect');
var zrUtil = require('../core/util');
var roundRectHelper = require('./helper/roundRect');
var LRU = require('../core/LRU');
var globalImageCache = new LRU(50);
/**
* @alias zrender/graphic/Image
* @extends module:zrender/graphic/Displayable
* @constructor
* @param {Object} opts
*/
function ZImage(opts) {
Displayable.call(this, opts);
}
ZImage.prototype = {
constructor: ZImage,
type: 'image',
brush: function (ctx) {
var style = this.style;
var src = style.image;
var image;
// style.image is a url string
if (typeof src === 'string') {
image = this._image;
}
// style.image is an HTMLImageElement or HTMLCanvasElement or Canvas
else {
image = src;
}
// FIXME Case create many images with src
if (!image && src) {
// Try get from global image cache
var cachedImgObj = globalImageCache.get(src);
if (!cachedImgObj) {
// Create a new image
image = new Image();
image.onload = function () {
image.onload = null;
for (var i = 0; i < cachedImgObj.pending.length; i++) {
cachedImgObj.pending[i].dirty();
}
};
cachedImgObj = {
image: image,
pending: [this]
};
image.src = src;
globalImageCache.put(src, cachedImgObj);
this._image = image;
return;
}
else {
image = cachedImgObj.image;
this._image = image;
// Image is not complete finish, add to pending list
if (!image.width || !image.height) {
cachedImgObj.pending.push(this);
return;
}
}
}
if (image) {
// 图片已经加载完成
// if (image.nodeName.toUpperCase() == 'IMG') {
// if (!image.complete) {
// return;
// }
// }
// Else is canvas
var width = style.width || image.width;
var height = style.height || image.height;
var x = style.x || 0;
var y = style.y || 0;
// 图片加载失败
if (!image.width || !image.height) {
return;
}
ctx.save();
style.bind(ctx);
// 设置transform
this.setTransform(ctx);
if (style.r) {
// Border radius clipping
// FIXME
ctx.beginPath();
roundRectHelper.buildPath(ctx, style);
ctx.clip();
}
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 == null) {
style.width = width;
}
if (style.height == null) {
style.height = height;
}
// Draw rect text
if (style.text != null) {
this.drawRectText(ctx, this.getBoundingRect());
}
ctx.restore();
}
},
getBoundingRect: function () {
var style = this.style;
if (! this._rect) {
this._rect = new BoundingRect(
style.x || 0, style.y || 0, style.width || 0, style.height || 0
);
}
return this._rect;
}
};
zrUtil.inherits(ZImage, Displayable);
return ZImage;
});
Zerion Mini Shell 1.0