mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-05-16 01:33:09 +00:00
1f55de07c4
* feat(pr/fixLineWidth) Fix problem on fabric.Line controls and line.getWidth() * fix line boxes and svg import
366 lines
10 KiB
JavaScript
366 lines
10 KiB
JavaScript
(function(global) {
|
|
|
|
'use strict';
|
|
|
|
var fabric = global.fabric || (global.fabric = { }),
|
|
extend = fabric.util.object.extend,
|
|
clone = fabric.util.object.clone,
|
|
coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 },
|
|
supportsLineDash = fabric.StaticCanvas.supports('setLineDash');
|
|
|
|
if (fabric.Line) {
|
|
fabric.warn('fabric.Line is already defined');
|
|
return;
|
|
}
|
|
|
|
var cacheProperties = fabric.Object.prototype.cacheProperties.concat();
|
|
cacheProperties.push(
|
|
'x1',
|
|
'x2',
|
|
'y1',
|
|
'y2'
|
|
);
|
|
|
|
/**
|
|
* Line class
|
|
* @class fabric.Line
|
|
* @extends fabric.Object
|
|
* @see {@link fabric.Line#initialize} for constructor definition
|
|
*/
|
|
fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ {
|
|
|
|
/**
|
|
* Type of an object
|
|
* @type String
|
|
* @default
|
|
*/
|
|
type: 'line',
|
|
|
|
/**
|
|
* x value or first line edge
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
x1: 0,
|
|
|
|
/**
|
|
* y value or first line edge
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
y1: 0,
|
|
|
|
/**
|
|
* x value or second line edge
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
x2: 0,
|
|
|
|
/**
|
|
* y value or second line edge
|
|
* @type Number
|
|
* @default
|
|
*/
|
|
y2: 0,
|
|
|
|
cacheProperties: cacheProperties,
|
|
|
|
/**
|
|
* Constructor
|
|
* @param {Array} [points] Array of points
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Line} thisArg
|
|
*/
|
|
initialize: function(points, options) {
|
|
if (!points) {
|
|
points = [0, 0, 0, 0];
|
|
}
|
|
|
|
this.callSuper('initialize', options);
|
|
|
|
this.set('x1', points[0]);
|
|
this.set('y1', points[1]);
|
|
this.set('x2', points[2]);
|
|
this.set('y2', points[3]);
|
|
|
|
this._setWidthHeight(options);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} [options] Options
|
|
*/
|
|
_setWidthHeight: function(options) {
|
|
options || (options = { });
|
|
|
|
this.width = Math.abs(this.x2 - this.x1);
|
|
this.height = Math.abs(this.y2 - this.y1);
|
|
|
|
this.left = 'left' in options
|
|
? options.left
|
|
: this._getLeftToOriginX();
|
|
|
|
this.top = 'top' in options
|
|
? options.top
|
|
: this._getTopToOriginY();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} key
|
|
* @param {*} value
|
|
*/
|
|
_set: function(key, value) {
|
|
this.callSuper('_set', key, value);
|
|
if (typeof coordProps[key] !== 'undefined') {
|
|
this._setWidthHeight();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line.
|
|
*/
|
|
_getLeftToOriginX: makeEdgeToOriginGetter(
|
|
{ // property names
|
|
origin: 'originX',
|
|
axis1: 'x1',
|
|
axis2: 'x2',
|
|
dimension: 'width'
|
|
},
|
|
{ // possible values of origin
|
|
nearest: 'left',
|
|
center: 'center',
|
|
farthest: 'right'
|
|
}
|
|
),
|
|
|
|
/**
|
|
* @private
|
|
* @return {Number} topToOriginY Distance from top edge of canvas to originY of Line.
|
|
*/
|
|
_getTopToOriginY: makeEdgeToOriginGetter(
|
|
{ // property names
|
|
origin: 'originY',
|
|
axis1: 'y1',
|
|
axis2: 'y2',
|
|
dimension: 'height'
|
|
},
|
|
{ // possible values of origin
|
|
nearest: 'top',
|
|
center: 'center',
|
|
farthest: 'bottom'
|
|
}
|
|
),
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
* @param {Boolean} noTransform
|
|
*/
|
|
_render: function(ctx, noTransform) {
|
|
ctx.beginPath();
|
|
|
|
if (noTransform) {
|
|
// Line coords are distances from left-top of canvas to origin of line.
|
|
// To render line in a path-group, we need to translate them to
|
|
// distances from center of path-group to center of line.
|
|
var cp = this.getCenterPoint(),
|
|
offset = this.strokeWidth / 2;
|
|
ctx.translate(
|
|
cp.x - (this.strokeLineCap === 'butt' && this.height === 0 ? 0 : offset),
|
|
cp.y - (this.strokeLineCap === 'butt' && this.width === 0 ? 0 : offset)
|
|
);
|
|
}
|
|
|
|
if (!this.strokeDashArray || this.strokeDashArray && supportsLineDash) {
|
|
// move from center (of virtual box) to its left/top corner
|
|
// we can't assume x1, y1 is top left and x2, y2 is bottom right
|
|
var p = this.calcLinePoints();
|
|
ctx.moveTo(p.x1, p.y1);
|
|
ctx.lineTo(p.x2, p.y2);
|
|
}
|
|
|
|
ctx.lineWidth = this.strokeWidth;
|
|
|
|
// TODO: test this
|
|
// make sure setting "fill" changes color of a line
|
|
// (by copying fillStyle to strokeStyle, since line is stroked, not filled)
|
|
var origStrokeStyle = ctx.strokeStyle;
|
|
ctx.strokeStyle = this.stroke || ctx.fillStyle;
|
|
this.stroke && this._renderStroke(ctx);
|
|
ctx.strokeStyle = origStrokeStyle;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {CanvasRenderingContext2D} ctx Context to render on
|
|
*/
|
|
_renderDashedStroke: function(ctx) {
|
|
var p = this.calcLinePoints();
|
|
|
|
ctx.beginPath();
|
|
fabric.util.drawDashedLine(ctx, p.x1, p.y1, p.x2, p.y2, this.strokeDashArray);
|
|
ctx.closePath();
|
|
},
|
|
|
|
/**
|
|
* Returns object representation of an instance
|
|
* @methd toObject
|
|
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
|
|
* @return {Object} object representation of an instance
|
|
*/
|
|
toObject: function(propertiesToInclude) {
|
|
return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints());
|
|
},
|
|
|
|
/*
|
|
* Calculate object dimensions from its properties
|
|
* @private
|
|
*/
|
|
_getNonTransformedDimensions: function() {
|
|
var dim = this.callSuper('_getNonTransformedDimensions');
|
|
if (this.strokeLineCap === 'butt') {
|
|
if (this.width === 0) {
|
|
dim.y -= this.strokeWidth;
|
|
}
|
|
if (this.height === 0) {
|
|
dim.x -= this.strokeWidth;
|
|
}
|
|
}
|
|
return dim;
|
|
},
|
|
|
|
/**
|
|
* Recalculates line points given width and height
|
|
* @private
|
|
*/
|
|
calcLinePoints: function() {
|
|
var xMult = this.x1 <= this.x2 ? -1 : 1,
|
|
yMult = this.y1 <= this.y2 ? -1 : 1,
|
|
x1 = (xMult * this.width * 0.5),
|
|
y1 = (yMult * this.height * 0.5),
|
|
x2 = (xMult * this.width * -0.5),
|
|
y2 = (yMult * this.height * -0.5);
|
|
|
|
return {
|
|
x1: x1,
|
|
x2: x2,
|
|
y1: y1,
|
|
y2: y2
|
|
};
|
|
},
|
|
|
|
/* _TO_SVG_START_ */
|
|
/**
|
|
* Returns SVG representation of an instance
|
|
* @param {Function} [reviver] Method for further parsing of svg representation.
|
|
* @return {String} svg representation of an instance
|
|
*/
|
|
toSVG: function(reviver) {
|
|
var markup = this._createBaseSVGMarkup(),
|
|
p = { x1: this.x1, x2: this.x2, y1: this.y1, y2: this.y2 };
|
|
|
|
if (!(this.group && this.group.type === 'path-group')) {
|
|
p = this.calcLinePoints();
|
|
}
|
|
markup.push(
|
|
'<line ', this.getSvgId(),
|
|
'x1="', p.x1,
|
|
'" y1="', p.y1,
|
|
'" x2="', p.x2,
|
|
'" y2="', p.y2,
|
|
'" style="', this.getSvgStyles(),
|
|
'" transform="', this.getSvgTransform(),
|
|
this.getSvgTransformMatrix(),
|
|
'"/>\n'
|
|
);
|
|
|
|
return reviver ? reviver(markup.join('')) : markup.join('');
|
|
},
|
|
/* _TO_SVG_END_ */
|
|
});
|
|
|
|
/* _FROM_SVG_START_ */
|
|
/**
|
|
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement})
|
|
* @static
|
|
* @memberOf fabric.Line
|
|
* @see http://www.w3.org/TR/SVG/shapes.html#LineElement
|
|
*/
|
|
fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' '));
|
|
|
|
/**
|
|
* Returns fabric.Line instance from an SVG element
|
|
* @static
|
|
* @memberOf fabric.Line
|
|
* @param {SVGElement} element Element to parse
|
|
* @param {Object} [options] Options object
|
|
* @return {fabric.Line} instance of fabric.Line
|
|
*/
|
|
fabric.Line.fromElement = function(element, options) {
|
|
options = options || { };
|
|
var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES),
|
|
points = [
|
|
parsedAttributes.x1 || 0,
|
|
parsedAttributes.y1 || 0,
|
|
parsedAttributes.x2 || 0,
|
|
parsedAttributes.y2 || 0
|
|
];
|
|
options.originX = 'left';
|
|
options.originY = 'top';
|
|
return new fabric.Line(points, extend(parsedAttributes, options));
|
|
};
|
|
/* _FROM_SVG_END_ */
|
|
|
|
/**
|
|
* Returns fabric.Line instance from an object representation
|
|
* @static
|
|
* @memberOf fabric.Line
|
|
* @param {Object} object Object to create an instance from
|
|
* @param {function} [callback] invoked with new instance as first argument
|
|
* @param {Boolean} [forceAsync] Force an async behaviour trying to create pattern first
|
|
* @return {fabric.Line} instance of fabric.Line
|
|
*/
|
|
fabric.Line.fromObject = function(object, callback, forceAsync) {
|
|
function _callback(instance) {
|
|
delete instance.points;
|
|
callback && callback(instance);
|
|
};
|
|
var options = clone(object, true);
|
|
options.points = [object.x1, object.y1, object.x2, object.y2];
|
|
var line = fabric.Object._fromObject('Line', options, _callback, forceAsync, 'points');
|
|
if (line) {
|
|
delete line.points;
|
|
}
|
|
return line;
|
|
};
|
|
|
|
/**
|
|
* Produces a function that calculates distance from canvas edge to Line origin.
|
|
*/
|
|
function makeEdgeToOriginGetter(propertyNames, originValues) {
|
|
var origin = propertyNames.origin,
|
|
axis1 = propertyNames.axis1,
|
|
axis2 = propertyNames.axis2,
|
|
dimension = propertyNames.dimension,
|
|
nearest = originValues.nearest,
|
|
center = originValues.center,
|
|
farthest = originValues.farthest;
|
|
|
|
return function() {
|
|
switch (this.get(origin)) {
|
|
case nearest:
|
|
return Math.min(this.get(axis1), this.get(axis2));
|
|
case center:
|
|
return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension));
|
|
case farthest:
|
|
return Math.max(this.get(axis1), this.get(axis2));
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
})(typeof exports !== 'undefined' ? exports : this);
|