lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-24 08:46:44 +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
* http://konvajs.github.io/
* 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)
* Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
@@ -14922,18 +14922,18 @@
(function() {
'use strict';
/**
* Line constructor.  Lines are defined by an array of points and
* a tension
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Array} config.points
* @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
* @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 {String} [config.fill] fill color
* Line constructor.  Lines are defined by an array of points and
* a tension
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @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.
* 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.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 {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @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 {Array} [config.dash]
* @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.width]
* @param {Number} [config.height]
@@ -15004,15 +15004,15 @@
* the entire stage by dragging any portion of the stage
* @param {Number} [config.dragDistance]
* @param {Function} [config.dragBoundFunc]
* @example
* var line = new Konva.Line({
* x: 100,
* y: 50,
* points: [73, 70, 340, 23, 450, 60, 500, 20],
* stroke: 'red',
* tension: 1
* });
*/
* @example
* var line = new Konva.Line({
* x: 100,
* y: 50,
* points: [73, 70, 340, 23, 450, 60, 500, 20],
* stroke: 'red',
* tension: 1
* });
*/
Konva.Line = function(config) {
this.___init(config);
};
@@ -15200,76 +15200,76 @@
Konva.Factory.addGetterSetter(Konva.Line, 'closed', false);
/**
* get/set closed flag. The default is false
* @name closed
* @method
* @memberof Konva.Line.prototype
* @param {Boolean} closed
* @returns {Boolean}
* @example
* // get closed flag
* var closed = line.closed();
*
* // close the shape
* line.closed(true);
*
* // open the shape
* line.closed(false);
*/
* get/set closed flag. The default is false
* @name closed
* @method
* @memberof Konva.Line.prototype
* @param {Boolean} closed
* @returns {Boolean}
* @example
* // get closed flag
* var closed = line.closed();
*
* // close the shape
* line.closed(true);
*
* // open the shape
* line.closed(false);
*/
Konva.Factory.addGetterSetter(Konva.Line, 'bezier', false);
/**
* get/set bezier flag. The default is false
* @name bezier
* @method
* @memberof Konva.Line.prototype
* @param {Boolean} bezier
* @returns {Boolean}
* @example
* // get whether the line is a bezier
* var isBezier = line.bezier();
*
* // set whether the line is a bezier
* line.bezier(true);
*/
* get/set bezier flag. The default is false
* @name bezier
* @method
* @memberof Konva.Line.prototype
* @param {Boolean} bezier
* @returns {Boolean}
* @example
* // get whether the line is a bezier
* var isBezier = line.bezier();
*
* // set whether the line is a bezier
* line.bezier(true);
*/
Konva.Factory.addGetterSetter(Konva.Line, 'tension', 0);
/**
* get/set tension
* @name tension
* @method
* @memberof Konva.Line.prototype
* @param {Number} Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
* The default is 0
* @returns {Number}
* @example
* // get tension
* var tension = line.tension();
*
* // set tension
* line.tension(3);
*/
* get/set tension
* @name tension
* @method
* @memberof Konva.Line.prototype
* @param {Number} Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
* The default is 0
* @returns {Number}
* @example
* // get tension
* var tension = line.tension();
*
* // set tension
* line.tension(3);
*/
Konva.Factory.addGetterSetter(Konva.Line, 'points', []);
/**
* get/set points array
* @name points
* @method
* @memberof Konva.Line.prototype
* @param {Array} points
* @returns {Array}
* @example
* // get points
* var points = line.points();
*
* // set points
* line.points([10, 20, 30, 40, 50, 60]);
*
* // push a new point
* line.points(line.points().concat([70, 80]));
*/
* get/set points array
* @name points
* @method
* @memberof Konva.Line.prototype
* @param {Array} points
* @returns {Array}
* @example
* // get points
* var points = line.points();
*
* // set points
* line.points([10, 20, 30, 40, 50, 60]);
*
* // push a new point
* line.points(line.points().concat([70, 80]));
*/
Konva.Collection.mapMethods(Konva.Line);
})();

2
konva.min.js vendored
View File

@@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.7.6
* http://konvajs.github.io/
* 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)
* Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)

89
src/shapes/Transformer.js
View File

@@ -2,12 +2,23 @@
'use strict';
var CHANGE_KONVA = 'Change.konva';
var ATTR_CHANGE_LIST = ['keepRatio', 'resizeEnabled', 'rotateHandlerOffset'];
var ATTR_CHANGE_LIST = ['resizeEnabled', 'rotateHandlerOffset'];
Konva.Transformer = function(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 = {
_centroid: false,
____init: function(config) {
@@ -42,16 +53,11 @@
_createElements: function() {
this._createBack();
this._createAnchor('top-left');
this._createAnchor('top-center');
this._createAnchor('top-right');
this._createAnchor('middle-right');
this._createAnchor('middle-left');
this._createAnchor('bottom-left');
this._createAnchor('bottom-center');
this._createAnchor('bottom-right');
RESIZERS_NAMES.forEach(
function(name) {
this._createAnchor(name);
}.bind(this)
);
this._createAnchor('rotater');
},
@@ -104,7 +110,13 @@
ctx.beginPath();
ctx.rect(0, 0, this.width(), this.height());
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);
}
});
@@ -333,6 +345,8 @@
y: attrs.absY
});
}
this.fire('transform');
this._el.fire('transform');
this._update();
this.getLayer().batchDraw();
},
@@ -352,53 +366,54 @@
});
}
var keepRatio = this.keepRatio();
var enabledResizers = this.enabledResizers();
var resizeEnabled = this.resizeEnabled();
this.findOne('.top-left').setAttrs({
x: 0,
y: 0,
visible: resizeEnabled
visible: resizeEnabled && enabledResizers.indexOf('top-left') >= 0
});
this.findOne('.top-center').setAttrs({
x: width / 2,
y: 0,
visible: resizeEnabled && !keepRatio
visible: resizeEnabled && enabledResizers.indexOf('top-center') >= 0
});
this.findOne('.top-right').setAttrs({
x: width,
y: 0,
visible: resizeEnabled
visible: resizeEnabled && enabledResizers.indexOf('top-right') >= 0
});
this.findOne('.middle-left').setAttrs({
x: 0,
y: height / 2,
visible: resizeEnabled && !keepRatio
visible: resizeEnabled && enabledResizers.indexOf('middle-left') >= 0
});
this.findOne('.middle-right').setAttrs({
x: width,
y: height / 2,
visible: resizeEnabled && !keepRatio
visible: resizeEnabled && enabledResizers.indexOf('middle-right') >= 0
});
this.findOne('.bottom-left').setAttrs({
x: 0,
y: height,
visible: resizeEnabled
visible: resizeEnabled && enabledResizers.indexOf('bottom-left') >= 0
});
this.findOne('.bottom-center').setAttrs({
x: width / 2,
y: height,
visible: resizeEnabled && !keepRatio
visible: resizeEnabled && enabledResizers.indexOf('bottom-center') >= 0
});
this.findOne('.bottom-right').setAttrs({
x: width,
y: height,
visible: resizeEnabled
visible: resizeEnabled && enabledResizers.indexOf('bottom-right') >= 0
});
this.findOne('.rotater').setAttrs({
x: width / 2,
y: -this.rotateHandlerOffset()
y: -this.rotateHandlerOffset(),
visible: this.rotateEnabled()
});
this.findOne('.back').setAttrs({
@@ -417,8 +432,36 @@
};
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, 'rotateEnabled', true);
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);