svg-shape-element.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. jvm.SVGShapeElement = function(name, config, style){
  2. jvm.SVGShapeElement.parentClass.call(this, name, config);
  3. jvm.AbstractShapeElement.apply(this, arguments);
  4. };
  5. jvm.inherits(jvm.SVGShapeElement, jvm.SVGElement);
  6. jvm.mixin(jvm.SVGShapeElement, jvm.AbstractShapeElement);
  7. jvm.SVGShapeElement.prototype.applyAttr = function(attr, value){
  8. var patternEl,
  9. imageEl,
  10. that = this;
  11. if (attr === 'fill' && jvm.isImageUrl(value)) {
  12. if (!jvm.SVGShapeElement.images[value]) {
  13. jvm.whenImageLoaded(value).then(function(img){
  14. imageEl = new jvm.SVGElement('image');
  15. imageEl.node.setAttributeNS('http://www.w3.org/1999/xlink', 'href', value);
  16. imageEl.applyAttr('x', '0');
  17. imageEl.applyAttr('y', '0');
  18. imageEl.applyAttr('width', img[0].width);
  19. imageEl.applyAttr('height', img[0].height);
  20. patternEl = new jvm.SVGElement('pattern');
  21. patternEl.applyAttr('id', 'image'+jvm.SVGShapeElement.imageCounter);
  22. patternEl.applyAttr('x', 0);
  23. patternEl.applyAttr('y', 0);
  24. patternEl.applyAttr('width', img[0].width / 2);
  25. patternEl.applyAttr('height', img[0].height / 2);
  26. patternEl.applyAttr('viewBox', '0 0 '+img[0].width+' '+img[0].height);
  27. patternEl.applyAttr('patternUnits', 'userSpaceOnUse');
  28. patternEl.node.appendChild( imageEl.node );
  29. that.canvas.defsElement.node.appendChild( patternEl.node );
  30. jvm.SVGShapeElement.images[value] = jvm.SVGShapeElement.imageCounter++;
  31. that.applyAttr('fill', 'url(#image'+jvm.SVGShapeElement.images[value]+')');
  32. });
  33. } else {
  34. this.applyAttr('fill', 'url(#image'+jvm.SVGShapeElement.images[value]+')');
  35. }
  36. } else {
  37. jvm.SVGShapeElement.parentClass.prototype.applyAttr.apply(this, arguments);
  38. }
  39. };
  40. jvm.SVGShapeElement.imageCounter = 1;
  41. jvm.SVGShapeElement.images = {};