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

4
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)
@@ -14928,7 +14928,7 @@
* @memberof Konva
* @augments Konva.Shape
* @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.
* The default is 0
* @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob

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);