102 lines
2.6 KiB
JavaScript
102 lines
2.6 KiB
JavaScript
|
var Class = require('../../core/class');
|
||
|
|
var Base = require('./base');
|
||
|
|
var Path = require('./path');
|
||
|
|
var DOM = require('./dom');
|
||
|
|
|
||
|
|
var precision = 100;
|
||
|
|
|
||
|
|
module.exports = Class(Base, {
|
||
|
|
|
||
|
|
base_initialize: Base.prototype.initialize,
|
||
|
|
|
||
|
|
initialize: function(path, width, height){
|
||
|
|
this.base_initialize('shape');
|
||
|
|
|
||
|
|
var p = this.pathElement = DOM.createElement('path');
|
||
|
|
p.gradientshapeok = true;
|
||
|
|
this.element.appendChild(p);
|
||
|
|
|
||
|
|
this.width = width;
|
||
|
|
this.height = height;
|
||
|
|
|
||
|
|
if (path != null) this.draw(path);
|
||
|
|
},
|
||
|
|
|
||
|
|
// SVG to VML
|
||
|
|
|
||
|
|
draw: function(path, width, height){
|
||
|
|
|
||
|
|
if (!(path instanceof Path)) path = new Path(path);
|
||
|
|
this._vml = path.toVML();
|
||
|
|
//this._size = path.measure();
|
||
|
|
|
||
|
|
if (width != null) this.width = width;
|
||
|
|
if (height != null) this.height = height;
|
||
|
|
|
||
|
|
if (!this._boxCoords) this._transform();
|
||
|
|
this._redraw(this._prefix, this._suffix);
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
// radial gradient workaround
|
||
|
|
|
||
|
|
_redraw: function(prefix, suffix){
|
||
|
|
var vml = this._vml || '';
|
||
|
|
|
||
|
|
this._prefix = prefix;
|
||
|
|
this._suffix = suffix
|
||
|
|
if (prefix){
|
||
|
|
vml = [
|
||
|
|
prefix, vml, suffix,
|
||
|
|
// Don't stroke the path with the extra ellipse, redraw the stroked path separately
|
||
|
|
'ns e', vml, 'nf'
|
||
|
|
].join(' ');
|
||
|
|
}
|
||
|
|
|
||
|
|
this.element.path = vml + 'e';
|
||
|
|
},
|
||
|
|
|
||
|
|
fillRadial: function(stops, focusX, focusY, radiusX, radiusY, centerX, centerY){
|
||
|
|
var fill = this._createGradient('gradientradial', stops);
|
||
|
|
if (focusX == null) focusX = (this.left || 0) + (this.width || 0) * 0.5;
|
||
|
|
if (focusY == null) focusY = (this.top || 0) + (this.height || 0) * 0.5;
|
||
|
|
if (radiusY == null) radiusY = radiusX || (this.height * 0.5) || 0;
|
||
|
|
if (radiusX == null) radiusX = (this.width || 0) * 0.5;
|
||
|
|
if (centerX == null) centerX = focusX;
|
||
|
|
if (centerY == null) centerY = focusY;
|
||
|
|
|
||
|
|
centerX += centerX - focusX;
|
||
|
|
centerY += centerY - focusY;
|
||
|
|
|
||
|
|
var cx = Math.round(centerX * precision),
|
||
|
|
cy = Math.round(centerY * precision),
|
||
|
|
|
||
|
|
rx = Math.round(radiusX * 2 * precision),
|
||
|
|
ry = Math.round(radiusY * 2 * precision),
|
||
|
|
|
||
|
|
arc = ['wa', cx - rx, cy - ry, cx + rx, cy + ry].join(' ');
|
||
|
|
|
||
|
|
this._redraw(
|
||
|
|
// Resolve rendering bug
|
||
|
|
['m', cx, cy - ry, 'l', cx, cy - ry].join(' '),
|
||
|
|
// Draw an ellipse around the path to force an elliptical gradient on any shape
|
||
|
|
[
|
||
|
|
'm', cx, cy - ry,
|
||
|
|
arc, cx, cy - ry, cx, cy + ry, arc, cx, cy + ry, cx, cy - ry,
|
||
|
|
arc, cx, cy - ry, cx, cy + ry, arc, cx, cy + ry, cx, cy - ry
|
||
|
|
].join(' ')
|
||
|
|
);
|
||
|
|
|
||
|
|
this._boxCoords = { left: focusX - 2, top: focusY - 2, width: 4, height: 4 };
|
||
|
|
|
||
|
|
fill.focusposition = '0.5,0.5';
|
||
|
|
fill.focussize = '0 0';
|
||
|
|
fill.focus = '50%';
|
||
|
|
|
||
|
|
this._transform();
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|