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

remove rounding from getClientRect

Browse Source
This commit is contained in:
Anton Lavrenov
2022-03-12 22:28:19 -05:00
parent a75fd53f0e
commit fcf53dc138
13 changed files with 106 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
konva.js
View File

@@ -8,7 +8,7 @@
* Konva JavaScript Framework v8.3.3
* http://konvajs.org/
* Licensed under the MIT
* Date: Wed Feb 23 2022
* Date: Tue Mar 08 2022
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -15001,9 +15001,9 @@
x: pos.x - ap.x,
y: pos.y - ap.y,
};
this._fire('transformstart', { evt: e, target: this.getNode() });
this._fire('transformstart', { evt: e.evt, target: this.getNode() });
this._nodes.forEach((target) => {
target._fire('transformstart', { evt: e, target });
target._fire('transformstart', { evt: e.evt, target });
});
}
_handleMouseMove(e) {

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

21
src/Node.ts
View File

@@ -322,8 +322,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
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,
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;
@@ -335,12 +335,25 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
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,

16
src/Shape.ts
View File

@@ -538,19 +538,19 @@ export class Shape<
// 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;
}
// let roundingOffset = 0;
// if (Math.round(strokeWidth / 2) !== strokeWidth / 2) {
// roundingOffset = 1;
// }
const rect = {
width: width + roundingOffset,
height: height + roundingOffset,
width: width,
height: height,
x:
-Math.round(strokeWidth / 2 + blurRadius) +
-(strokeWidth / 2 + blurRadius) +
Math.min(shadowOffsetX, 0) +
fillRect.x,
y:
-Math.round(strokeWidth / 2 + blurRadius) +
-(strokeWidth / 2 + blurRadius) +
Math.min(shadowOffsetY, 0) +
fillRect.y,
};

40
src/shapes/Arc.ts
View File

@@ -62,26 +62,32 @@ export class Arc extends Shape<ArcConfig> {
}
getSelfRect() {
const innerRadius = this.innerRadius()
const outerRadius = this.outerRadius()
const clockwise = this.clockwise()
const innerRadius = this.innerRadius();
const outerRadius = this.outerRadius();
const clockwise = this.clockwise();
const angle = Konva.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 boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2))
const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius)
const boundRight = boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius)
const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius)
const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius)
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 boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
const boundLeft =
boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
const boundRight =
boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius);
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,
};
}
innerRadius: GetSet<number, this>;

8
src/shapes/Path.ts
View File

@@ -188,10 +188,10 @@ export class Path extends Shape<PathConfig> {
}
}
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,
};
}
/**

8
src/shapes/TextPath.ts
View File

@@ -646,10 +646,10 @@ Factory.addGetterSetter(TextPath, 'align', 'left');
* @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);
*/
@@ -662,10 +662,10 @@ Factory.addGetterSetter(TextPath, 'letterSpacing', 0, getNumberValidator());
* @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');

13
test/unit/Arc-test.ts
View File

@@ -5,6 +5,7 @@ import {
Konva,
createCanvas,
compareLayerAndCanvas,
assertAlmostDeepEqual,
} from './test-utils';
describe('Arc', function () {
@@ -88,7 +89,7 @@ describe('Arc', function () {
layer.add(arc);
stage.add(layer);
assert.deepEqual(arc.getSelfRect(), {
assertAlmostDeepEqual(arc.getSelfRect(), {
x: 0,
y: 0,
width: 80,
@@ -116,7 +117,7 @@ describe('Arc', function () {
layer.add(arc);
stage.add(layer);
assert.deepEqual(arc.getSelfRect(), {
assertAlmostDeepEqual(arc.getSelfRect(), {
x: -80,
y: -80,
width: 160,
@@ -140,7 +141,7 @@ describe('Arc', function () {
layer.add(arc);
stage.add(layer);
assert.deepEqual(arc.getSelfRect(), {
assertAlmostDeepEqual(arc.getSelfRect(), {
x: 0,
y: -80,
width: 80,
@@ -163,14 +164,14 @@ describe('Arc', function () {
layer.add(arc);
stage.add(layer);
assert.deepEqual(arc.getSelfRect(), {
assertAlmostDeepEqual(arc.getSelfRect(), {
x: 25,
y: 0,
width: 55,
height: 69,
height: 69.282032302755,
});
});
it('cache', function () {
var stage = addStage();
var layer = new Konva.Layer();

5
test/unit/Node-cache-test.ts
View File

@@ -831,7 +831,8 @@ describe('Caching', function () {
group.cache();
const canvas = group._cache.get('canvas').scene;
assert.equal(canvas.width, 105 * canvas.pixelRatio);
console.log(canvas.width / 2);
assert.equal(canvas.width, 106 * canvas.pixelRatio);
});
it('cache group with rectangle with fill and opacity', function () {
@@ -1468,7 +1469,7 @@ describe('Caching', function () {
layer.draw();
assert.equal(
circle._cache.get('canvas').filter.width,
20 * circle._cache.get('canvas').filter.pixelRatio
21 * circle._cache.get('canvas').filter.pixelRatio
);
circle.filters([]);
// TODO: should we clear cache canvas?

36
test/unit/Path-test.ts
View File

@@ -10,6 +10,7 @@ import {
compareLayerAndCanvas,
cloneAndCompareLayer,
isNode,
assertAlmostDeepEqual,
} from './test-utils';
describe('Path', function () {
@@ -1280,7 +1281,12 @@ describe('Path', function () {
});
layer.add(path);
var rect = path.getClientRect();
assert.deepEqual(rect, { x: 60, y: 184, width: 106, height: 102 });
assertAlmostDeepEqual(rect, {
x: 59.55,
y: 183.55,
width: 106,
height: 102,
});
});
it('getClientRect of complex path', function () {
@@ -1310,7 +1316,12 @@ describe('Path', function () {
layer.add(back);
layer.draw();
assert.deepEqual(rect, { x: 9, y: 66, width: 95, height: 55 });
assertAlmostDeepEqual(rect, {
x: 8.6440882161882,
y: 65.75902834,
width: 94.74182356762,
height: 55.4919433,
});
});
it('getClientRect of another complex path', function () {
@@ -1339,11 +1350,11 @@ describe('Path', function () {
layer.add(back);
layer.draw();
assert.deepEqual(rect, {
assertAlmostDeepEqual(rect, {
x: 49,
y: 49.7,
y: 49.7086649,
width: 215,
height: 71.39999999999999,
height: 71.3826701999,
});
});
@@ -1372,7 +1383,12 @@ describe('Path', function () {
layer.add(back);
layer.draw();
assert.deepEqual(rect, { x: 49, y: 49, width: 43, height: 48 });
assertAlmostDeepEqual(rect, {
x: 48.981379,
y: 48.996825,
width: 42.84717526,
height: 48.057550000000006,
});
});
it('getClientRect for arc', function () {
@@ -1408,15 +1424,15 @@ describe('Path', function () {
layer.add(back);
layer.draw();
assert.deepEqual(rect, {
assertAlmostDeepEqual(rect, {
x: 0,
y: 0,
width: 132.53012048192795,
width: 132.4001878816343,
height: 100,
});
});
it.skip('getClientRect on scaled', function () {
it('getClientRect on scaled', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
@@ -1444,7 +1460,7 @@ describe('Path', function () {
layer.add(back);
layer.draw();
assert.deepEqual(rect, {
assertAlmostDeepEqual(rect, {
height: 201.99999999999994,
width: 201.99999999999994,
x: 99,

4
test/unit/RegularPolygon-test.ts
View File

@@ -203,7 +203,7 @@ describe('RegularPolygon', function () {
var box = poly.getClientRect();
assertAlmostEqual(box.width, 92.60254037844388);
assertAlmostEqual(box.height, 81.00000000000003);
assertAlmostEqual(box.width, 91.60254037844388);
assertAlmostEqual(box.height, 80.00000000000003);
});
});

2
test/unit/Transformer-test.ts
View File

@@ -2509,7 +2509,7 @@ describe('Transformer', function () {
});
});
it.only('transform events check', function () {
it('transform events check', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);

6
test/unit/test-utils.ts
View File

@@ -384,3 +384,9 @@ export const assertAlmostEqual = function (val1, val2) {
throw new Error('Expected ' + val1 + ' to be almost equal to ' + val2);
}
};
export const assertAlmostDeepEqual = function (obj1, obj2) {
for (var key1 in obj1) {
assertAlmostEqual(obj1[key1], obj2[key1]);
}
};