1 //= require "object.class" 2 3 (function() { 4 5 var fabric = this.fabric || (this.fabric = { }), 6 extend = fabric.util.object.extend; 7 8 if (fabric.Line) { 9 fabric.warn('fabric.Line is already defined'); 10 return; 11 } 12 13 /** 14 * @class Line 15 * @extends fabric.Object 16 */ 17 fabric.Line = fabric.util.createClass(fabric.Object, /** @scope fabric.Line.prototype */ { 18 19 /** 20 * @property 21 * @type String 22 */ 23 type: 'line', 24 25 /** 26 * Constructor 27 * @method initialize 28 * @param {Array} points Array of points 29 * @param {Object} [options] Options object 30 * @return {fabric.Line} thisArg 31 */ 32 initialize: function(points, options) { 33 if (!points) { 34 points = [0, 0, 0, 0]; 35 } 36 37 this.callSuper('initialize', options); 38 39 this.set('x1', points[0]); 40 this.set('y1', points[1]); 41 this.set('x2', points[2]); 42 this.set('y2', points[3]); 43 44 this.set('width', this.x2 - this.x1); 45 this.set('height', this.y2 - this.y1); 46 this.set('left', this.x1 + this.width / 2); 47 this.set('top', this.y1 + this.height / 2); 48 }, 49 50 /** 51 * @private 52 * @method _render 53 * @param {CanvasRenderingContext2D} ctx Context to render on 54 */ 55 _render: function(ctx) { 56 ctx.beginPath(); 57 58 // move from center (of virtual box) to its left/top corner 59 ctx.moveTo(-this.width / 2, -this.height / 2); 60 ctx.lineTo(this.width / 2, this.height / 2); 61 62 // TODO: test this 63 // make sure setting "fill" changes color of a line 64 // (by copying fillStyle to strokeStyle, since line is stroked, not filled) 65 var origStrokeStyle = ctx.strokeStyle; 66 ctx.strokeStyle = ctx.fillStyle; 67 ctx.stroke(); 68 ctx.strokeStyle = origStrokeStyle; 69 }, 70 71 /** 72 * @method complexity 73 * @return {Number} complexity 74 */ 75 complexity: function() { 76 return 1; 77 }, 78 79 /** 80 * Returns object representation of an instance 81 * @methd toObject 82 * @return {Object} 83 */ 84 toObject: function() { 85 return extend(this.callSuper('toObject'), { 86 x1: this.get('x1'), 87 y1: this.get('y1'), 88 x2: this.get('x2'), 89 y2: this.get('y2') 90 }); 91 } 92 }); 93 94 /** 95 * @see http://www.w3.org/TR/SVG/shapes.html#LineElement 96 */ 97 fabric.Element.ATTRIBUTE_NAMES = 'x1 y1 x2 y2 stroke stroke-width transform'.split(' '); 98 99 /** 100 * @static 101 * @method fabric.Line.fromElement 102 * @param {SVGElement} element Element to parse 103 * @param {Object} [options] Options object 104 * @return {fabric.Line} instance of fabric.Line 105 */ 106 fabric.Line.fromElement = function(element, options) { 107 var parsedAttributes = fabric.parseAttributes(element, fabric.Element.ATTRIBUTE_NAMES); 108 var points = [ 109 parsedAttributes.x1 || 0, 110 parsedAttributes.y1 || 0, 111 parsedAttributes.x2 || 0, 112 parsedAttributes.y2 || 0 113 ]; 114 return new fabric.Line(points, extend(parsedAttributes, options)); 115 }; 116 117 /** 118 * @static 119 * @method fabric.Line.fromObject 120 * @param {Object} object Object to create an instance from 121 * @return {fabric.Line} instance of fabric.Line 122 */ 123 fabric.Line.fromObject = function(object) { 124 var points = [object.x1, object.y1, object.x2, object.y2]; 125 return new fabric.Line(points, object); 126 }; 127 })();