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

fix bug for wrong getClientRect calculation. close #50

Browse Source
This commit is contained in:
lavrton
2015-04-16 09:43:21 +07:00
parent c2154933d1
commit 41c10555bc
5 changed files with 72 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -9,6 +9,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- HDPI support for desktop
- Fix bug when filters are not correct for HDPI
- Fix bug when hit area is not correct for HDPI
- Fix bug for incorrect `getClientRect` calculation
### Changed
- context wrapper is more capable with native context.

49
konva.js
View File

@@ -6585,10 +6585,18 @@ var Konva = {};
var minX, minY, maxX, maxY;
this.children.each(function(child) {
var rect = child.getClientRect();
minX = Math.min(minX, rect.x) || rect.x;
minY = Math.min(minY, rect.y) || rect.y;
maxX = Math.max(maxX, rect.x + rect.width) || (rect.x + rect.width);
maxY = Math.max(maxY, rect.y + rect.height) || (rect.y + rect.height);
if (minX === undefined) { // initial value for first child
minX = rect.x;
minY = rect.y;
maxX = rect.x + rect.width;
maxY = rect.y + rect.height;
} else {
minX = Math.min(minX, rect.x);
minY = Math.min(minY, rect.y);
maxX = Math.max(maxX, rect.x + rect.width);
maxY = Math.max(maxY, rect.y + rect.height);
}
});
var rect = {
@@ -7170,48 +7178,33 @@ var Konva = {};
var threshold = alphaThreshold || 0,
cachedCanvas = this._cache.canvas,
sceneCanvas = this._getCachedSceneCanvas(),
sceneContext = sceneCanvas.getContext(),
hitCanvas = cachedCanvas.hit,
hitContext = hitCanvas.getContext(),
width = sceneCanvas.getWidth(),
height = sceneCanvas.getHeight(),
sceneImageData, sceneData, hitImageData, hitData, len, rgbColorKey, i, alpha;
hitWidth = hitCanvas.getWidth(),
hitHeight = hitCanvas.getHeight(),
hitImageData, hitData, len, rgbColorKey, i, alpha;
hitContext.clear();
var ratio = sceneCanvas.pixelRatio;
var hitWidth = Math.floor(width / ratio);
var hitHeight = Math.floor(height / ratio);
hitContext.drawImage(sceneCanvas._canvas, 0, 0, hitWidth, hitHeight);
try {
// if pixelRatio > 1 we need to redraw scene canvas into temp canvas
// with pixelRatio = 1 to have the same dimension as hitCanvas
if (ratio !== 1) {
var tempCanvas = new Konva.SceneCanvas({
width : hitWidth,
height : hitHeight,
pixelRatio : 1
});
tempCanvas.getContext().drawImage(sceneCanvas._canvas, 0, 0, hitWidth, hitHeight);
sceneImageData = tempCanvas.getContext().getImageData(0, 0, hitWidth, hitHeight);
sceneData = sceneImageData.data;
} else {
sceneImageData = sceneContext.getImageData(0, 0, width, height);
sceneData = sceneImageData.data;
}
hitImageData = hitContext.getImageData(0, 0, hitWidth, hitHeight);
hitData = hitImageData.data;
len = sceneData.length;
len = hitData.length;
rgbColorKey = Konva.Util._hexToRgb(this.colorKey);
// replace non transparent pixels with color key
for(i = 0; i < len; i += 4) {
alpha = sceneData[i + 3];
alpha = hitData[i + 3];
if (alpha > threshold) {
hitData[i] = rgbColorKey.r;
hitData[i + 1] = rgbColorKey.g;
hitData[i + 2] = rgbColorKey.b;
hitData[i + 3] = 255;
}
else {
hitData[i + 3] = 0;
}
}
hitContext.putImageData(hitImageData, 0, 0);
}

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

16
src/Container.js
View File

@@ -399,10 +399,18 @@
var minX, minY, maxX, maxY;
this.children.each(function(child) {
var rect = child.getClientRect();
minX = Math.min(minX, rect.x) || rect.x;
minY = Math.min(minY, rect.y) || rect.y;
maxX = Math.max(maxX, rect.x + rect.width) || (rect.x + rect.width);
maxY = Math.max(maxY, rect.y + rect.height) || (rect.y + rect.height);
if (minX === undefined) { // initial value for first child
minX = rect.x;
minY = rect.y;
maxX = rect.x + rect.width;
maxY = rect.y + rect.height;
} else {
minX = Math.min(minX, rect.x);
minY = Math.min(minY, rect.y);
maxX = Math.max(maxX, rect.x + rect.width);
maxY = Math.max(maxY, rect.y + rect.height);
}
});
var rect = {

35
test/unit/Node-cache-test.js
View File

@@ -480,6 +480,41 @@ suite('Caching', function() {
compareLayerAndCanvas(layer, canvas, 150);
});
test('cache group with rectangle and text', function() {
var stage = addStage();
var layer = new Konva.Layer();
var button = new Konva.Group({
width: 100,
height: 50,
draggable: true
});
var face = new Konva.Rect({
fill: 'red',
x: 0, y: 0,
width: 100,
height: 50
});
var text = new Konva.Text({
text: 'Wrong button',
x: 15,
y: 20
});
button.add(face);
button.add(text);
button.cache();
layer.add(button);
stage.add(layer);
cloneAndCompareLayer(layer, 100);
});
test('cache layer with several shape with transform', function() {
var stage = addStage();