|
1 | 1 | /**
|
2 | 2 | * Create a polygon object. Inherits all methods from <b>Facade.Entity</b>.
|
3 | 3 | *
|
4 |
| - * var polygon = new Facade.Polygon({ |
5 |
| - * x: 0, |
6 |
| - * y: 0, |
7 |
| - * points: [ [100, 0], [200, 100], [100, 200], [0, 100] ], |
8 |
| - * lineWidth: 10, |
9 |
| - * strokeStyle: '#333E4B', |
10 |
| - * fillStyle: '#1C73A8', |
11 |
| - * anchor: 'top/left' |
12 |
| - * }); |
| 4 | + * ``` |
| 5 | + * var polygon = new Facade.Polygon({ |
| 6 | + * x: 0, |
| 7 | + * y: 0, |
| 8 | + * points: [ [100, 0], [200, 100], [100, 200], [0, 100] ], |
| 9 | + * lineWidth: 10, |
| 10 | + * strokeStyle: '#333E4B', |
| 11 | + * fillStyle: '#1C73A8', |
| 12 | + * anchor: 'top/left' |
| 13 | + * }); |
| 14 | + * ``` |
13 | 15 | *
|
14 | 16 | * @param {Object} [options] Options to create the polygon with.
|
15 | 17 | * @param {String} [options.anchor] Position to anchor the polygon. <i>Default:</i> "top/left"<br><ul><li>top/left</li><li>top/center</li><li>top/right</li><li>center/left</li><li>center</li><li>center/right</li><li>bottom/left</li><li>bottom/center</li><li>bottom/right</li></ul>
|
@@ -93,3 +95,70 @@ Facade.Polygon.prototype._defaultOptions = function (updated) {
|
93 | 95 | return options;
|
94 | 96 |
|
95 | 97 | };
|
| 98 | + |
| 99 | +/** |
| 100 | + * Renders a polygon entity to a canvas. |
| 101 | + * |
| 102 | + * @example polygon._draw(facade, options, metrics); |
| 103 | + * @param {Object} facade Facade.js object. |
| 104 | + * @param {Object} options Options used to render the polygon. |
| 105 | + * @param {Object} metrics Metrics used to render the polygon. |
| 106 | + * @return {Void} |
| 107 | + * @private |
| 108 | + */ |
| 109 | + |
| 110 | +Facade.Polygon.prototype._draw = function (facade, options, metrics) { |
| 111 | + |
| 112 | + var context = facade.context, |
| 113 | + i, |
| 114 | + length; |
| 115 | + |
| 116 | + this._applyTransforms(context, options, metrics); |
| 117 | + |
| 118 | + if (options.points.length) { |
| 119 | + |
| 120 | + context.beginPath(); |
| 121 | + |
| 122 | + for (i = 0, length = options.points.length; i < length; i += 1) { |
| 123 | + |
| 124 | + if (options.points[i].length === 6) { |
| 125 | + |
| 126 | + context.bezierCurveTo.apply(context, options.points[i]); |
| 127 | + |
| 128 | + } else if (options.points[i].length === 5) { |
| 129 | + |
| 130 | + context.arc.apply(context, options.points[i]); |
| 131 | + |
| 132 | + } else if (options.points[i].length === 2) { |
| 133 | + |
| 134 | + context.lineTo.apply(context, options.points[i]); |
| 135 | + |
| 136 | + } |
| 137 | + |
| 138 | + } |
| 139 | + |
| 140 | + if (options.closePath) { |
| 141 | + |
| 142 | + context.closePath(); |
| 143 | + |
| 144 | + } else { |
| 145 | + |
| 146 | + context.moveTo.apply(context, options.points[length - 1]); |
| 147 | + |
| 148 | + } |
| 149 | + |
| 150 | + if (options.fillStyle) { |
| 151 | + |
| 152 | + context.fill(); |
| 153 | + |
| 154 | + } |
| 155 | + |
| 156 | + if (options.lineWidth > 0) { |
| 157 | + |
| 158 | + context.stroke(); |
| 159 | + |
| 160 | + } |
| 161 | + |
| 162 | + } |
| 163 | + |
| 164 | +}; |
0 commit comments