lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-24 16:53:06 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Transformer updates

Browse Source
This commit is contained in:
Anton Lavrenov
2018-02-01 10:25:42 +07:00
parent 159574e31c
commit 4fcb2f9f7b
3 changed files with 149 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
konva.js
View File

@@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.7.6 * Konva JavaScript Framework v1.7.6
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Fri Jan 12 2018 * Date: Fri Jan 26 2018
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
@@ -14922,18 +14922,18 @@
(function() { (function() {
'use strict'; 'use strict';
/** /**
* Line constructor.  Lines are defined by an array of points and * Line constructor.  Lines are defined by an array of points and
* a tension * a tension
* @constructor * @constructor
* @memberof Konva * @memberof Konva
* @augments Konva.Shape * @augments Konva.Shape
* @param {Object} config * @param {Object} config
* @param {Array} config.points * @param {Array} config.points Array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].
* @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation. * @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
* The default is 0 * The default is 0
* @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob * @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob
* @param {Boolean} [config.bezier] if no tension is provided but bezier=true, we draw the line as a bezier using the passed points * @param {Boolean} [config.bezier] if no tension is provided but bezier=true, we draw the line as a bezier using the passed points
* @param {String} [config.fill] fill color * @param {String} [config.fill] fill color
* @param {Image} [config.fillPatternImage] fill pattern image * @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX] * @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY] * @param {Number} [config.fillPatternY]
@@ -14984,7 +14984,7 @@
* @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true
* @param {Array} [config.dash] * @param {Array} [config.dash]
* @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true
* @param {Number} [config.x] * @param {Number} [config.x]
* @param {Number} [config.y] * @param {Number} [config.y]
* @param {Number} [config.width] * @param {Number} [config.width]
* @param {Number} [config.height] * @param {Number} [config.height]
@@ -15004,15 +15004,15 @@
* the entire stage by dragging any portion of the stage * the entire stage by dragging any portion of the stage
* @param {Number} [config.dragDistance] * @param {Number} [config.dragDistance]
* @param {Function} [config.dragBoundFunc] * @param {Function} [config.dragBoundFunc]
* @example * @example
* var line = new Konva.Line({ * var line = new Konva.Line({
* x: 100, * x: 100,
* y: 50, * y: 50,
* points: [73, 70, 340, 23, 450, 60, 500, 20], * points: [73, 70, 340, 23, 450, 60, 500, 20],
* stroke: 'red', * stroke: 'red',
* tension: 1 * tension: 1
* }); * });
*/ */
Konva.Line = function(config) { Konva.Line = function(config) {
this.___init(config); this.___init(config);
}; };
@@ -15200,76 +15200,76 @@
Konva.Factory.addGetterSetter(Konva.Line, 'closed', false); Konva.Factory.addGetterSetter(Konva.Line, 'closed', false);
/** /**
* get/set closed flag. The default is false * get/set closed flag. The default is false
* @name closed * @name closed
* @method * @method
* @memberof Konva.Line.prototype * @memberof Konva.Line.prototype
* @param {Boolean} closed * @param {Boolean} closed
* @returns {Boolean} * @returns {Boolean}
* @example * @example
* // get closed flag * // get closed flag
* var closed = line.closed(); * var closed = line.closed();
* *
* // close the shape * // close the shape
* line.closed(true); * line.closed(true);
* *
* // open the shape * // open the shape
* line.closed(false); * line.closed(false);
*/ */
Konva.Factory.addGetterSetter(Konva.Line, 'bezier', false); Konva.Factory.addGetterSetter(Konva.Line, 'bezier', false);
/** /**
* get/set bezier flag. The default is false * get/set bezier flag. The default is false
* @name bezier * @name bezier
* @method * @method
* @memberof Konva.Line.prototype * @memberof Konva.Line.prototype
* @param {Boolean} bezier * @param {Boolean} bezier
* @returns {Boolean} * @returns {Boolean}
* @example * @example
* // get whether the line is a bezier * // get whether the line is a bezier
* var isBezier = line.bezier(); * var isBezier = line.bezier();
* *
* // set whether the line is a bezier * // set whether the line is a bezier
* line.bezier(true); * line.bezier(true);
*/ */
Konva.Factory.addGetterSetter(Konva.Line, 'tension', 0); Konva.Factory.addGetterSetter(Konva.Line, 'tension', 0);
/** /**
* get/set tension * get/set tension
* @name tension * @name tension
* @method * @method
* @memberof Konva.Line.prototype * @memberof Konva.Line.prototype
* @param {Number} Higher values will result in a more curvy line. A value of 0 will result in no interpolation. * @param {Number} Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
* The default is 0 * The default is 0
* @returns {Number} * @returns {Number}
* @example * @example
* // get tension * // get tension
* var tension = line.tension(); * var tension = line.tension();
* *
* // set tension * // set tension
* line.tension(3); * line.tension(3);
*/ */
Konva.Factory.addGetterSetter(Konva.Line, 'points', []); Konva.Factory.addGetterSetter(Konva.Line, 'points', []);
/** /**
* get/set points array * get/set points array
* @name points * @name points
* @method * @method
* @memberof Konva.Line.prototype * @memberof Konva.Line.prototype
* @param {Array} points * @param {Array} points
* @returns {Array} * @returns {Array}
* @example * @example
* // get points * // get points
* var points = line.points(); * var points = line.points();
* *
* // set points * // set points
* line.points([10, 20, 30, 40, 50, 60]); * line.points([10, 20, 30, 40, 50, 60]);
* *
* // push a new point * // push a new point
* line.points(line.points().concat([70, 80])); * line.points(line.points().concat([70, 80]));
*/ */
Konva.Collection.mapMethods(Konva.Line); Konva.Collection.mapMethods(Konva.Line);
})(); })();

2
konva.min.js vendored
View File

@@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.7.6 * Konva JavaScript Framework v1.7.6
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Fri Jan 12 2018 * Date: Fri Jan 26 2018
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)

89
src/shapes/Transformer.js
View File

@@ -2,12 +2,23 @@
'use strict'; 'use strict';
var CHANGE_KONVA = 'Change.konva'; var CHANGE_KONVA = 'Change.konva';
var ATTR_CHANGE_LIST = ['keepRatio', 'resizeEnabled', 'rotateHandlerOffset']; var ATTR_CHANGE_LIST = ['resizeEnabled', 'rotateHandlerOffset'];
Konva.Transformer = function(config) { Konva.Transformer = function(config) {
this.____init(config); this.____init(config);
}; };
var RESIZERS_NAMES = [
'top-left',
'top-center',
'top-right',
'middle-right',
'middle-left',
'bottom-left',
'bottom-center',
'bottom-right'
];
Konva.Transformer.prototype = { Konva.Transformer.prototype = {
_centroid: false, _centroid: false,
____init: function(config) { ____init: function(config) {
@@ -42,16 +53,11 @@
_createElements: function() { _createElements: function() {
this._createBack(); this._createBack();
this._createAnchor('top-left'); RESIZERS_NAMES.forEach(
this._createAnchor('top-center'); function(name) {
this._createAnchor('top-right'); this._createAnchor(name);
}.bind(this)
this._createAnchor('middle-right'); );
this._createAnchor('middle-left');
this._createAnchor('bottom-left');
this._createAnchor('bottom-center');
this._createAnchor('bottom-right');
this._createAnchor('rotater'); this._createAnchor('rotater');
}, },
@@ -104,7 +110,13 @@
ctx.beginPath(); ctx.beginPath();
ctx.rect(0, 0, this.width(), this.height()); ctx.rect(0, 0, this.width(), this.height());
ctx.moveTo(this.width() / 2, 0); ctx.moveTo(this.width() / 2, 0);
ctx.lineTo(this.width() / 2, -this.getParent().rotateHandlerOffset()); if (this.getParent().rotateEnabled()) {
ctx.lineTo(
this.width() / 2,
-this.getParent().rotateHandlerOffset()
);
}
ctx.fillStrokeShape(this); ctx.fillStrokeShape(this);
} }
}); });
@@ -333,6 +345,8 @@
y: attrs.absY y: attrs.absY
}); });
} }
this.fire('transform');
this._el.fire('transform');
this._update(); this._update();
this.getLayer().batchDraw(); this.getLayer().batchDraw();
}, },
@@ -352,53 +366,54 @@
}); });
} }
var keepRatio = this.keepRatio(); var enabledResizers = this.enabledResizers();
var resizeEnabled = this.resizeEnabled(); var resizeEnabled = this.resizeEnabled();
this.findOne('.top-left').setAttrs({ this.findOne('.top-left').setAttrs({
x: 0, x: 0,
y: 0, y: 0,
visible: resizeEnabled visible: resizeEnabled && enabledResizers.indexOf('top-left') >= 0
}); });
this.findOne('.top-center').setAttrs({ this.findOne('.top-center').setAttrs({
x: width / 2, x: width / 2,
y: 0, y: 0,
visible: resizeEnabled && !keepRatio visible: resizeEnabled && enabledResizers.indexOf('top-center') >= 0
}); });
this.findOne('.top-right').setAttrs({ this.findOne('.top-right').setAttrs({
x: width, x: width,
y: 0, y: 0,
visible: resizeEnabled visible: resizeEnabled && enabledResizers.indexOf('top-right') >= 0
}); });
this.findOne('.middle-left').setAttrs({ this.findOne('.middle-left').setAttrs({
x: 0, x: 0,
y: height / 2, y: height / 2,
visible: resizeEnabled && !keepRatio visible: resizeEnabled && enabledResizers.indexOf('middle-left') >= 0
}); });
this.findOne('.middle-right').setAttrs({ this.findOne('.middle-right').setAttrs({
x: width, x: width,
y: height / 2, y: height / 2,
visible: resizeEnabled && !keepRatio visible: resizeEnabled && enabledResizers.indexOf('middle-right') >= 0
}); });
this.findOne('.bottom-left').setAttrs({ this.findOne('.bottom-left').setAttrs({
x: 0, x: 0,
y: height, y: height,
visible: resizeEnabled visible: resizeEnabled && enabledResizers.indexOf('bottom-left') >= 0
}); });
this.findOne('.bottom-center').setAttrs({ this.findOne('.bottom-center').setAttrs({
x: width / 2, x: width / 2,
y: height, y: height,
visible: resizeEnabled && !keepRatio visible: resizeEnabled && enabledResizers.indexOf('bottom-center') >= 0
}); });
this.findOne('.bottom-right').setAttrs({ this.findOne('.bottom-right').setAttrs({
x: width, x: width,
y: height, y: height,
visible: resizeEnabled visible: resizeEnabled && enabledResizers.indexOf('bottom-right') >= 0
}); });
this.findOne('.rotater').setAttrs({ this.findOne('.rotater').setAttrs({
x: width / 2, x: width / 2,
y: -this.rotateHandlerOffset() y: -this.rotateHandlerOffset(),
visible: this.rotateEnabled()
}); });
this.findOne('.back').setAttrs({ this.findOne('.back').setAttrs({
@@ -417,8 +432,36 @@
}; };
Konva.Util.extend(Konva.Transformer, Konva.Group); Konva.Util.extend(Konva.Transformer, Konva.Group);
Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', false); Konva.Factory.addGetterSetter(
Konva.Transformer,
'enabledResizers',
RESIZERS_NAMES
);
Konva.Factory.addGetterSetter(
Konva.Transformer,
'enabledResizers',
RESIZERS_NAMES,
function(val) {
if (!(val instanceof Array)) {
Konva.Util.warn('enabledResizers value should be an array');
}
if (val instanceof Array) {
val.forEach(function(name) {
if (RESIZERS_NAMES.indexOf('name') === -1) {
Konva.Util.warn(
'Unknown resizer name: ' +
name +
'. Available names are: ' +
RESIZERS_NAMES.join(', ')
);
}
});
}
return val || [];
}
);
Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true); Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateEnabled', true);
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []); Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50); Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);