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) || 1); 47 this.set('height', (this.y2 - this.y1) || 1); 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 ctx.lineWidth = this.strokeWidth; 65 66 // TODO: test this 67 // make sure setting "fill" changes color of a line 68 // (by copying fillStyle to strokeStyle, since line is stroked, not filled) 69 var origStrokeStyle = ctx.strokeStyle; 70 ctx.strokeStyle = ctx.fillStyle; 71 ctx.stroke(); 72 ctx.strokeStyle = origStrokeStyle; 73 }, 74 75 /** 76 * Returns complexity of an instance 77 * @method complexity 78 * @return {Number} complexity 79 */ 80 complexity: function() { 81 return 1; 82 }, 83 84 /** 85 * Returns object representation of an instance 86 * @methd toObject 87 * @return {Object} 88 */ 89 toObject: function() { 90 return extend(this.callSuper('toObject'), { 91 x1: this.get('x1'), 92 y1: this.get('y1'), 93 x2: this.get('x2'), 94 y2: this.get('y2') 95 }); 96 } 97 }); 98 99 /** 100 * List of attribute names to account for when parsing SVG element (used by `fabric.Line.fromElement`) 101 * @static 102 * @see http://www.w3.org/TR/SVG/shapes.html#LineElement 103 */ 104 fabric.Line.ATTRIBUTE_NAMES = 'x1 y1 x2 y2 stroke stroke-width transform'.split(' '); 105 106 /** 107 * Returns fabric.Line instance from an SVG element 108 * @static 109 * @method fabric.Line.fromElement 110 * @param {SVGElement} element Element to parse 111 * @param {Object} [options] Options object 112 * @return {fabric.Line} instance of fabric.Line 113 */ 114 fabric.Line.fromElement = function(element, options) { 115 var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES); 116 var points = [ 117 parsedAttributes.x1 || 0, 118 parsedAttributes.y1 || 0, 119 parsedAttributes.x2 || 0, 120 parsedAttributes.y2 || 0 121 ]; 122 return new fabric.Line(points, extend(parsedAttributes, options)); 123 }; 124 125 /** 126 * Returns fabric.Line instance from an object representation 127 * @static 128 * @method fabric.Line.fromObject 129 * @param {Object} object Object to create an instance from 130 * @return {fabric.Line} instance of fabric.Line 131 */ 132 fabric.Line.fromObject = function(object) { 133 var points = [object.x1, object.y1, object.x2, object.y2]; 134 return new fabric.Line(points, object); 135 }; 136 })(this);