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

update CHANGELOG with new version

Browse Source
This commit is contained in:
Anton Lavrenov 2022-03-13 08:08:37 -05:00
parent 01d5916ec4
commit aaa6f93f38
7 changed files with 78 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -3,11 +3,13 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
## 8.3.4 (2022-03-13)
- Fix characters positions calculations on `fontFamily` changes in `TextPath`.
- Remove rounding in `node.getClientRect()` results
- Fix event object on `transformstart` event.
## 8.3.3 (2022-03-23)
## 8.3.3 (2022-02-23)
- Fix `justify` align for text with several paragraphs.

81
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v8.3.3
* http://konvajs.org/
* Licensed under the MIT
* Date: Tue Mar 08 2022
* Date: Sun Mar 13 2022
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -2599,15 +2599,26 @@
relativeTo: this.getParent(),
});
}
var width = Math.ceil(conf.width || rect.width), height = Math.ceil(conf.height || rect.height), pixelRatio = conf.pixelRatio, x = conf.x === undefined ? rect.x : conf.x, y = conf.y === undefined ? rect.y : conf.y, offset = conf.offset || 0, drawBorder = conf.drawBorder || false, hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
var width = Math.ceil(conf.width || rect.width), height = Math.ceil(conf.height || rect.height), pixelRatio = conf.pixelRatio, x = conf.x === undefined ? Math.floor(rect.x) : conf.x, y = conf.y === undefined ? Math.floor(rect.y) : conf.y, offset = conf.offset || 0, drawBorder = conf.drawBorder || false, hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
if (!width || !height) {
Util.error('Can not cache the node. Width or height of the node equals 0. Caching is skipped.');
return;
}
width += offset * 2;
height += offset * 2;
// let's just add 1 pixel extra,
// because using Math.floor on x, y position may shift drawing
width += offset * 2 + 1;
height += offset * 2 + 1;
x -= offset;
y -= offset;
// if (Math.floor(x) < x) {
// x = Math.floor(x);
// // width += 1;
// }
// if (Math.floor(y) < y) {
// y = Math.floor(y);
// // height += 1;
// }
// console.log({ x, y, width, height }, rect);
var cachedSceneCanvas = new SceneCanvas({
pixelRatio: pixelRatio,
width: width,
@ -6704,14 +6715,17 @@
tr.scale(this.fillPatternScaleX(), this.fillPatternScaleY());
tr.translate(-1 * this.fillPatternOffsetX(), -1 * this.fillPatternOffsetY());
const m = tr.getMatrix();
pattern.setTransform({
a: m[0],
b: m[1],
c: m[2],
d: m[3],
e: m[4],
f: m[5], // Vertical translation (moving).
});
const matrix = typeof DOMMatrix === 'undefined'
? {
a: m[0],
b: m[1],
c: m[2],
d: m[3],
e: m[4],
f: m[5], // Vertical translation (moving).
}
: new DOMMatrix(m);
pattern.setTransform(matrix);
}
return pattern;
}
@ -6933,20 +6947,13 @@
const blurRadius = (applyShadow && this.shadowBlur()) || 0;
const width = preWidth + blurRadius * 2;
const height = preHeight + blurRadius * 2;
// if stroke, for example = 3
// we need to set x to 1.5, but after Math.round it will be 2
// as we have additional offset we need to increase width and height by 1 pixel
let roundingOffset = 0;
if (Math.round(strokeWidth / 2) !== strokeWidth / 2) {
roundingOffset = 1;
}
const rect = {
width: width + roundingOffset,
height: height + roundingOffset,
x: -Math.round(strokeWidth / 2 + blurRadius) +
width: width,
height: height,
x: -(strokeWidth / 2 + blurRadius) +
Math.min(shadowOffsetX, 0) +
fillRect.x,
y: -Math.round(strokeWidth / 2 + blurRadius) +
y: -(strokeWidth / 2 + blurRadius) +
Math.min(shadowOffsetY, 0) +
fillRect.y,
};
@ -9732,17 +9739,17 @@
const angle = Konva$2.getAngle(clockwise ? 360 - this.angle() : this.angle());
const boundLeftRatio = Math.cos(Math.min(angle, Math.PI));
const boundRightRatio = 1;
const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle), 3 * Math.PI / 2));
const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle), (3 * Math.PI) / 2));
const boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
const boundRight = boundRightRatio * (outerRadius );
const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius);
const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius);
return {
x: Math.round(boundLeft),
y: Math.round(clockwise ? -1 * boundBottom : boundTop),
width: Math.round(boundRight - boundLeft),
height: Math.round(boundBottom - boundTop)
x: boundLeft,
y: clockwise ? -1 * boundBottom : boundTop,
width: boundRight - boundLeft,
height: boundBottom - boundTop,
};
}
}
@ -10341,10 +10348,10 @@
}
}
return {
x: Math.round(minX),
y: Math.round(minY),
width: Math.round(maxX - minX),
height: Math.round(maxY - minY),
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY,
};
}
/**
@ -13964,7 +13971,7 @@
this._setTextData();
});
// update text data for certain attr changes
this.on('textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva', this._setTextData);
this.on('textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva fontFamilyChange.konva', this._setTextData);
this._setTextData();
}
_sceneFunc(context) {
@ -14386,10 +14393,10 @@
* @param {Number} letterSpacing
* @returns {Number}
* @example
* // get line height
* // get letter spacing value
* var letterSpacing = shape.letterSpacing();
*
* // set the line height
* // set the letter spacing value
* shape.letterSpacing(2);
*/
Factory.addGetterSetter(TextPath, 'letterSpacing', 0, getNumberValidator());
@ -14400,10 +14407,10 @@
* @param {String} textBaseline
* @returns {String}
* @example
* // get line height
* // get current text baseline
* var textBaseline = shape.textBaseline();
*
* // set the line height
* // set new text baseline
* shape.textBaseline('top');
*/
Factory.addGetterSetter(TextPath, 'textBaseline', 'middle');

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -89,7 +89,7 @@
"size-limit": "^7.0.8",
"ts-mocha": "^9.0.2",
"ts-node": "^9.1.1",
"typescript": "^4.6.2"
"typescript": "^4.5.5"
},
"keywords": [
"canvas",

22
src/Shape.ts
View File

@ -257,14 +257,19 @@ export class Shape<
const m = tr.getMatrix();
pattern.setTransform({
a: m[0], // Horizontal scaling. A value of 1 results in no scaling.
b: m[1], // Vertical skewing.
c: m[2], // Horizontal skewing.
d: m[3],
e: m[4], // Horizontal translation (moving).
f: m[5], // Vertical translation (moving).
});
const matrix =
typeof DOMMatrix === 'undefined'
? {
a: m[0], // Horizontal scaling. A value of 1 results in no scaling.
b: m[1], // Vertical skewing.
c: m[2], // Horizontal skewing.
d: m[3],
e: m[4], // Horizontal translation (moving).
f: m[5], // Vertical translation (moving).
}
: new DOMMatrix(m);
pattern.setTransform(matrix);
}
return pattern;
}
@ -535,7 +540,6 @@ export class Shape<
const width = preWidth + blurRadius * 2;
const height = preHeight + blurRadius * 2;
const rect = {
width: width,
height: height,

2
src/index-node.ts
View File

@ -4,6 +4,8 @@ import * as Canvas from 'canvas';
const canvas = Canvas['default'] || Canvas;
global.DOMMatrix = canvas.DOMMatrix;
const isNode = typeof global.document === 'undefined';
if (isNode) {

23
test/unit/Text-test.ts
View File

@ -1379,16 +1379,19 @@ describe('Text', function () {
ctx.textBaseline = 'middle';
var grd = ctx.createPattern(imageObj, 'repeat');
if (isBrowser) {
grd.setTransform({
a: 0.5, // Horizontal scaling. A value of 1 results in no scaling.
b: 0, // Vertical skewing.
c: 0, // Horizontal skewing.
d: 0.5, // Vertical scaling. A value of 1 results in no scaling.
e: 0, // Horizontal translation (moving).
f: 0, // Vertical translation (moving).
});
}
const matrix =
typeof DOMMatrix === 'undefined'
? {
a: 0.5, // Horizontal scaling. A value of 1 results in no scaling.
b: 0, // Vertical skewing.
c: 0, // Horizontal skewing.
d: 0.5,
e: 0, // Horizontal translation (moving).
f: 0, // Vertical translation (moving).
}
: new DOMMatrix([0.5, 0, 0, 0.5, 0, 0]);
grd.setTransform(matrix);
ctx.fillStyle = grd;