-
Notifications
You must be signed in to change notification settings - Fork 430
/
svg-shape-element.js
49 lines (41 loc) · 1.83 KB
/
svg-shape-element.js
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
jvm.SVGShapeElement = function(name, config, style){
jvm.SVGShapeElement.parentClass.call(this, name, config);
jvm.AbstractShapeElement.apply(this, arguments);
};
jvm.inherits(jvm.SVGShapeElement, jvm.SVGElement);
jvm.mixin(jvm.SVGShapeElement, jvm.AbstractShapeElement);
jvm.SVGShapeElement.prototype.applyAttr = function(attr, value){
var patternEl,
imageEl,
that = this;
if (attr === 'fill' && jvm.isImageUrl(value)) {
if (!jvm.SVGShapeElement.images[value]) {
jvm.whenImageLoaded(value).then(function(img){
imageEl = new jvm.SVGElement('image');
imageEl.node.setAttributeNS('http://www.w3.org/1999/xlink', 'href', value);
imageEl.applyAttr('x', '0');
imageEl.applyAttr('y', '0');
imageEl.applyAttr('width', img[0].width);
imageEl.applyAttr('height', img[0].height);
patternEl = new jvm.SVGElement('pattern');
patternEl.applyAttr('id', 'image'+jvm.SVGShapeElement.imageCounter);
patternEl.applyAttr('x', 0);
patternEl.applyAttr('y', 0);
patternEl.applyAttr('width', img[0].width / 2);
patternEl.applyAttr('height', img[0].height / 2);
patternEl.applyAttr('viewBox', '0 0 '+img[0].width+' '+img[0].height);
patternEl.applyAttr('patternUnits', 'userSpaceOnUse');
patternEl.node.appendChild( imageEl.node );
that.canvas.defsElement.node.appendChild( patternEl.node );
jvm.SVGShapeElement.images[value] = jvm.SVGShapeElement.imageCounter++;
that.applyAttr('fill', 'url(#image'+jvm.SVGShapeElement.images[value]+')');
});
} else {
this.applyAttr('fill', 'url(#image'+jvm.SVGShapeElement.images[value]+')');
}
} else {
jvm.SVGShapeElement.parentClass.prototype.applyAttr.apply(this, arguments);
}
};
jvm.SVGShapeElement.imageCounter = 1;
jvm.SVGShapeElement.images = {};