lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[WIP] Partially fix unscaled stroke with gradient

Browse Source
This commit is contained in:
MaxGraey 2018-03-10 20:06:27 +02:00
parent d1fbcae49e
commit e7376cb690
3 changed files with 120 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
konva.js
View File

@ -2060,7 +2060,9 @@
if (shape.hasStroke()) { if (shape.hasStroke()) {
if (!strokeScaleEnabled) { if (!strokeScaleEnabled) {
this.save(); this.save();
this.setTransform(1, 0, 0, 1, 0, 0); var pixelRatio = this.getCanvas().getPixelRatio();
var transform = this._context.currentTransform;
this.setTransform(pixelRatio, transform.b, transform.c, pixelRatio, transform.e, transform.f);
} }
this._applyLineCap(shape); this._applyLineCap(shape);
@ -2140,7 +2142,9 @@
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text; shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (!strokeScaleEnabled) { if (!strokeScaleEnabled) {
this.save(); this.save();
this.setTransform(1, 0, 0, 1, 0, 0); var pixelRatio = this.getCanvas().getPixelRatio();
var transform = this._context.currentTransform;
this.setTransform(pixelRatio, transform.b, transform.c, pixelRatio, transform.e, transform.f);
} }
this._applyLineCap(shape); this._applyLineCap(shape);
this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('lineWidth', shape.strokeWidth());
@ -12688,10 +12692,10 @@
// Node extenders // Node extenders
/** /**
* initiate drag and drop * initiate drag and drop
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
*/ */
Konva.Node.prototype.startDrag = function() { Konva.Node.prototype.startDrag = function() {
var dd = Konva.DD, var dd = Konva.DD,
stage = this.getStage(), stage = this.getStage(),
@ -12744,10 +12748,10 @@
}; };
/** /**
* stop drag and drop * stop drag and drop
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
*/ */
Konva.Node.prototype.stopDrag = function() { Konva.Node.prototype.stopDrag = function() {
var dd = Konva.DD, var dd = Konva.DD,
evt = {}; evt = {};
@ -12775,10 +12779,10 @@
}; };
/** /**
* determine if node is currently in drag and drop mode * determine if node is currently in drag and drop mode
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
*/ */
Konva.Node.prototype.isDragging = function() { Konva.Node.prototype.isDragging = function() {
var dd = Konva.DD; var dd = Konva.DD;
return !!(dd.node && dd.node._id === this._id && dd.isDragging); return !!(dd.node && dd.node._id === this._id && dd.isDragging);
@ -12847,46 +12851,48 @@
Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc'); Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc');
/** /**
* get/set drag bound function. This is used to override the default * get/set drag bound function. This is used to override the default
* drag and drop position * drag and drop position.
* @name dragBoundFunc * @name dragBoundFunc
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
* @param {Function} dragBoundFunc * @param {Function} dragBoundFunc
* @returns {Function} * @returns {Function}
* @example * @example
* // get drag bound function * // get drag bound function
* var dragBoundFunc = node.dragBoundFunc(); * var dragBoundFunc = node.dragBoundFunc();
* *
* // create vertical drag and drop * // create vertical drag and drop
* node.dragBoundFunc(function(pos){ * node.dragBoundFunc(function(pos){
* return { * // important pos - is absolute position of the node
* x: this.getAbsolutePosition().x, * // you should return absolute position too
* y: pos.y * return {
* }; * x: this.getAbsolutePosition().x,
* }); * y: pos.y
*/ * };
* });
*/
Konva.Factory.addGetter(Konva.Node, 'draggable', false); Konva.Factory.addGetter(Konva.Node, 'draggable', false);
Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable'); Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable');
/** /**
* get/set draggable flag * get/set draggable flag
* @name draggable * @name draggable
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
* @param {Boolean} draggable * @param {Boolean} draggable
* @returns {Boolean} * @returns {Boolean}
* @example * @example
* // get draggable flag * // get draggable flag
* var draggable = node.draggable(); * var draggable = node.draggable();
* *
* // enable drag and drop * // enable drag and drop
* node.draggable(true); * node.draggable(true);
* *
* // disable drag and drop * // disable drag and drop
* node.draggable(false); * node.draggable(false);
*/ */
if (Konva.isBrowser) { if (Konva.isBrowser) {
var html = Konva.document.documentElement; var html = Konva.document.documentElement;
@ -15877,14 +15883,14 @@
(function() { (function() {
'use strict'; 'use strict';
/** /**
* Path constructor. * Path constructor.
* @author Jason Follas * @author Jason Follas
* @constructor * @constructor
* @memberof Konva * @memberof Konva
* @augments Konva.Shape * @augments Konva.Shape
* @param {Object} config * @param {Object} config
* @param {String} config.data SVG data string * @param {String} config.data SVG data string
* @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]
@ -15935,7 +15941,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]
@ -15955,15 +15961,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 path = new Konva.Path({ * var path = new Konva.Path({
* x: 240, * x: 240,
* y: 40, * y: 40,
* data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z', * data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
* fill: 'green', * fill: 'green',
* scale: 2 * scale: 2
* }); * });
*/ */
Konva.Path = function(config) { Konva.Path = function(config) {
this.___init(config); this.___init(config);
}; };
@ -16180,7 +16186,8 @@
}; };
}; };
Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) { Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) {
var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi); var cosPsi = Math.cos(psi),
sinPsi = Math.sin(psi);
var pt = { var pt = {
x: rx * Math.cos(theta), x: rx * Math.cos(theta),
y: ry * Math.sin(theta) y: ry * Math.sin(theta)
@ -16259,26 +16266,35 @@
// create array // create array
var arr = cs.split('|'); var arr = cs.split('|');
var ca = []; var ca = [];
var coords = [];
// init context point // init context point
var cpx = 0; var cpx = 0;
var cpy = 0; var cpy = 0;
var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
var match;
for (n = 1; n < arr.length; n++) { for (n = 1; n < arr.length; n++) {
var str = arr[n]; var str = arr[n];
var c = str.charAt(0); var c = str.charAt(0);
str = str.slice(1); str = str.slice(1);
// remove ,- for consistency
str = str.replace(new RegExp(',-', 'g'), '-'); coords.length = 0;
// add commas so that it's easy to split while ((match = re.exec(str))) {
str = str.replace(new RegExp('-', 'g'), ',-'); coords.push(match[0]);
str = str.replace(new RegExp('e,-', 'g'), 'e-');
var p = str.split(',');
if (p.length > 0 && p[0] === '') {
p.shift();
} }
// convert strings to floats
for (var i = 0; i < p.length; i++) { // while ((match = re.exec(str))) {
p[i] = parseFloat(p[i]); // coords.push(match[0]);
// }
var p = [];
for (var j = 0, jlen = coords.length; j < jlen; j++) {
var parsed = parseFloat(coords[j]);
if (!isNaN(parsed)) {
p.push(parsed);
}
} }
while (p.length > 0) { while (p.length > 0) {
if (isNaN(p[0])) { if (isNaN(p[0])) {
// case for a trailing comma before next command // case for a trailing comma before next command
@ -16287,7 +16303,8 @@
var cmd = null; var cmd = null;
var points = []; var points = [];
var startX = cpx, startY = cpy; var startX = cpx,
startY = cpy;
// Move var from within the switch to up here (jshint) // Move var from within the switch to up here (jshint)
var prevCmd, ctlPtx, ctlPty; // Ss, Tt var prevCmd, ctlPtx, ctlPty; // Ss, Tt
var rx, ry, psi, fa, fs, x1, y1; // Aa var rx, ry, psi, fa, fs, x1, y1; // Aa
@ -16716,22 +16733,22 @@
Konva.Factory.addGetterSetter(Konva.Path, 'data'); Konva.Factory.addGetterSetter(Konva.Path, 'data');
/** /**
* set SVG path data string. This method * set SVG path data string. This method
* also automatically parses the data string * also automatically parses the data string
* into a data array. Currently supported SVG data: * into a data array. Currently supported SVG data:
* M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z * M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
* @name setData * @name setData
* @method * @method
* @memberof Konva.Path.prototype * @memberof Konva.Path.prototype
* @param {String} SVG path command string * @param {String} SVG path command string
*/ */
/** /**
* get SVG path data string * get SVG path data string
* @name getData * @name getData
* @method * @method
* @memberof Konva.Path.prototype * @memberof Konva.Path.prototype
*/ */
Konva.Collection.mapMethods(Konva.Path); Konva.Collection.mapMethods(Konva.Path);
})(); })();

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/Context.js
View File

@ -611,7 +611,9 @@
if (shape.hasStroke()) { if (shape.hasStroke()) {
if (!strokeScaleEnabled) { if (!strokeScaleEnabled) {
this.save(); this.save();
this.setTransform(1, 0, 0, 1, 0, 0); var pixelRatio = this.getCanvas().getPixelRatio();
var transform = this._context.currentTransform;
this.setTransform(pixelRatio, transform.b, transform.c, pixelRatio, transform.e, transform.f);
} }
this._applyLineCap(shape); this._applyLineCap(shape);
@ -691,7 +693,9 @@
shape.getStrokeScaleEnabled() || shape instanceof Konva.Text; shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
if (!strokeScaleEnabled) { if (!strokeScaleEnabled) {
this.save(); this.save();
this.setTransform(1, 0, 0, 1, 0, 0); var pixelRatio = this.getCanvas().getPixelRatio();
var transform = this._context.currentTransform;
this.setTransform(pixelRatio, transform.b, transform.c, pixelRatio, transform.e, transform.f);
} }
this._applyLineCap(shape); this._applyLineCap(shape);
this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('lineWidth', shape.strokeWidth());