Image.js
2.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import Displayable from './Displayable';
import BoundingRect from '../core/BoundingRect';
import * as zrUtil from '../core/util';
import * as imageHelper from './helper/image';
/**
* @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, prevEl) {
var style = this.style;
var src = style.image;
// Must bind each time
style.bind(ctx, this, prevEl);
var image = this._image = imageHelper.createOrUpdateImage(
src,
this._image,
this,
this.onload
);
if (!image || !imageHelper.isImageReady(image)) {
return;
}
// 图片已经加载完成
// if (image.nodeName.toUpperCase() == 'IMG') {
// if (!image.complete) {
// return;
// }
// }
// Else is canvas
var x = style.x || 0;
var y = style.y || 0;
var width = style.width;
var height = style.height;
var aspect = image.width / image.height;
if (width == null && height != null) {
// Keep image/height ratio
width = height * aspect;
}
else if (height == null && width != null) {
height = width / aspect;
}
else if (width == null && height == null) {
width = image.width;
height = image.height;
}
// 设置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);
}
// Draw rect text
if (style.text != null) {
// Only restore transform when needs draw text.
this.restoreTransform(ctx);
this.drawRectText(ctx, this.getBoundingRect());
}
},
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);
export default ZImage;