mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
fix memory leak. close #1154
This commit is contained in:
Anton Lavrenov
parent
d8da0c742e
commit
089334b41c
@ -21,7 +21,7 @@
|
||||
"test:build": "parcel build ./test/unit-tests.html --dist-dir test-build --target none --public-url ./ --no-source-maps",
|
||||
"test:browser": "npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security",
|
||||
"test:node": "env TS_NODE_PROJECT=\"./test/tsconfig.json\" mocha -r ts-node/register test/unit/**/*.ts --exit && npm run test:import",
|
||||
"test:watch": "rm -rf ./parcel-cache && parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/performance/bunnies.html",
|
||||
"test:watch": "rm -rf ./parcel-cache && parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/sandbox.html ./test/performance/bunnies.html",
|
||||
"tsc": "tsc --removeComments",
|
||||
"rollup": "rollup -c",
|
||||
"clean": "rm -rf ./lib && rm -rf ./types && rm -rf ./es && rm -rf ./test-build",
|
||||
|
||||
@ -46,6 +46,14 @@ export class Image extends Shape<ImageConfig> {
|
||||
}
|
||||
_setImageLoad() {
|
||||
const image = this.image();
|
||||
// check is image is already loaded
|
||||
if (image && image.complete) {
|
||||
return;
|
||||
}
|
||||
// check is video is already loaded
|
||||
if (image && image.readyState === 4) {
|
||||
return;
|
||||
}
|
||||
if (image && image['addEventListener']) {
|
||||
image['addEventListener']('load', () => {
|
||||
this._requestDraw();
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</style>
|
||||
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
|
||||
<script>
|
||||
TouchEmulator();
|
||||
// TouchEmulator();
|
||||
</script>
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.7/hammer.js"></script> -->
|
||||
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
|
||||
@ -24,173 +24,35 @@
|
||||
<body>
|
||||
Some text
|
||||
<div id="container"></div>
|
||||
<script src="../konva.js"></script>
|
||||
<script src="../src/index.ts"></script>
|
||||
<script>
|
||||
// by default Konva prevent some events when node is dragging
|
||||
// it improve the performance and work well for 95% of cases
|
||||
// we need to enable all events on Konva, even when we are dragging a node
|
||||
// so it triggers touchmove correctly
|
||||
Konva.hitOnDragEnabled = true;
|
||||
|
||||
var width = window.innerWidth;
|
||||
var height = window.innerHeight;
|
||||
|
||||
var stage = new Konva.Stage({
|
||||
container: 'container',
|
||||
width: width,
|
||||
height: height,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var rect1 = new Konva.Rect({
|
||||
x: 60,
|
||||
y: 60,
|
||||
width: 300,
|
||||
height: 300,
|
||||
fill: 'red',
|
||||
name: 'rect',
|
||||
draggable: true,
|
||||
});
|
||||
layer.add(rect1);
|
||||
|
||||
var rect2 = new Konva.Rect({
|
||||
x: 150,
|
||||
y: 100,
|
||||
width: 150,
|
||||
height: 90,
|
||||
rotation: 45,
|
||||
fill: 'green',
|
||||
name: 'rect',
|
||||
draggable: true,
|
||||
});
|
||||
layer.add(rect2);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
|
||||
// by default select the first shape
|
||||
tr.nodes([rect1, rect2]);
|
||||
|
||||
layer.draw();
|
||||
|
||||
function getDistance(p1, p2) {
|
||||
return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
|
||||
}
|
||||
|
||||
function getCenter(p1, p2) {
|
||||
return {
|
||||
x: (p1.x + p2.x) / 2,
|
||||
y: (p1.y + p2.y) / 2,
|
||||
};
|
||||
}
|
||||
let lastCenter = null;
|
||||
let lastDist = null;
|
||||
|
||||
stage.on('touchmove', function (e) {
|
||||
e.evt.preventDefault();
|
||||
var touch1 = e.evt.touches[0];
|
||||
var touch2 = e.evt.touches[1];
|
||||
|
||||
if (touch1 && touch2) {
|
||||
// if the stage was under Konva's drag&drop
|
||||
// we need to stop it, and implement our own pan logic with two pointers
|
||||
if (stage.isDragging()) {
|
||||
stage.stopDrag();
|
||||
}
|
||||
|
||||
var p1 = {
|
||||
x: touch1.clientX,
|
||||
y: touch1.clientY,
|
||||
};
|
||||
var p2 = {
|
||||
x: touch2.clientX,
|
||||
y: touch2.clientY,
|
||||
};
|
||||
|
||||
if (!lastCenter) {
|
||||
lastCenter = getCenter(p1, p2);
|
||||
return;
|
||||
}
|
||||
var newCenter = getCenter(p1, p2);
|
||||
|
||||
var dist = getDistance(p1, p2);
|
||||
|
||||
if (!lastDist) {
|
||||
lastDist = dist;
|
||||
}
|
||||
|
||||
// local coordinates of center point
|
||||
var pointTo = {
|
||||
x: (newCenter.x - stage.x()) / stage.scaleX(),
|
||||
y: (newCenter.y - stage.y()) / stage.scaleX(),
|
||||
};
|
||||
|
||||
var scale = stage.scaleX() * (dist / lastDist);
|
||||
|
||||
stage.scaleX(scale);
|
||||
stage.scaleY(scale);
|
||||
|
||||
// calculate new position of the stage
|
||||
var newPos = {
|
||||
x: 2 * newCenter.x - pointTo.x * scale - lastCenter.x,
|
||||
y: 2 * newCenter.y - pointTo.y * scale - lastCenter.y,
|
||||
};
|
||||
|
||||
stage.position(newPos);
|
||||
|
||||
stage.batchDraw();
|
||||
lastDist = dist;
|
||||
lastCenter = newCenter;
|
||||
// noprotect
|
||||
class Ktest {
|
||||
constructor() {
|
||||
this.testLayer = new Konva.Group();
|
||||
this.image = (() => {
|
||||
const img = new Image();
|
||||
img.onerror = () => console.error(`Failed to load image`);
|
||||
img.src = 'https://www.webkit.org/blog-files/acid3-100.png';
|
||||
return img;
|
||||
})();
|
||||
}
|
||||
});
|
||||
|
||||
stage.on('touchend', function () {
|
||||
lastDist = 0;
|
||||
lastCenter = null;
|
||||
});
|
||||
|
||||
const col = new Konva.Collection();
|
||||
const array = [];
|
||||
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
const shape = new Konva.Rect();
|
||||
layer.add(shape);
|
||||
col.push(shape);
|
||||
array.push(shape);
|
||||
redraw() {
|
||||
console.log('redraw()');
|
||||
for (let n = 0; n < 20; ++n) {
|
||||
const g = this.testLayer;
|
||||
g.destroyChildren();
|
||||
for (let i = 0; i < 10; ++i) {
|
||||
const icon = new Konva.Image({ image: this.image });
|
||||
g.add(icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.time('collection');
|
||||
col.forEach((shape) => {
|
||||
shape.x(10);
|
||||
});
|
||||
console.timeEnd('collection');
|
||||
|
||||
console.time('array');
|
||||
array.forEach((shape) => {
|
||||
shape.x(15);
|
||||
});
|
||||
console.timeEnd('array');
|
||||
|
||||
Konva.autoDrawEnabled = true;
|
||||
|
||||
console.time('collection');
|
||||
col.forEach((shape) => {
|
||||
shape.x(10);
|
||||
});
|
||||
console.timeEnd('collection');
|
||||
|
||||
console.time('array');
|
||||
array.forEach((shape) => {
|
||||
shape.x(15);
|
||||
});
|
||||
console.timeEnd('array');
|
||||
|
||||
layer.on('draw', () => {
|
||||
console.error('draw');
|
||||
});
|
||||
const ktest = new Ktest();
|
||||
setInterval(() => ktest.redraw(), 500);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user