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