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

types fixes, konva-node updates

Browse Source
This commit is contained in:
Anton Lavrenov
2019-07-11 04:59:39 +07:00
parent 8b38345f50
commit b798a56bff
6 changed files with 72 additions and 1393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
konva-node/demo.js
View File

@@ -62,6 +62,10 @@ setTimeout(function() {
err && console.log(err);
console.log('See out.png');
});
// now try to create image from url
Konva.Image.fromURL(data, () => {
// shoul'd throw
});
}
});
};

7
konva-node/index.js
View File

@@ -26,6 +26,13 @@ Konva.Util.createCanvasElement = () => {
return node;
};
// create canvas in Node env
Konva.Util.createImageElement = () => {
const node = new canvas.Image();
node.style = {};
return node;
};
// _checkVisibility use dom element, in node we can skip it
Konva.Stage.prototype._checkVisibility = () => {};

1383
konva.js
View File

File diff suppressed because it is too large Load Diff

4
src/Node.ts
View File

@@ -1636,7 +1636,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return this._getAbsoluteTransform(top);
} else {
// if no argument, we can cache the result
return this._getCache(
return this._getCache(
ABSOLUTE_TRANSFORM,
this._getAbsoluteTransform
) as Transform;
@@ -2409,7 +2409,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @param {Element} [container] optional container dom element used only if you're
* creating a stage node
*/
static create(data, container) {
static create(data, container?) {
if (Util._isString(data)) {
data = JSON.parse(data);
}

2
src/Shape.ts
View File

@@ -1326,7 +1326,7 @@ Factory.addGetterSetter(Shape, 'fillPatternRepeat', 'repeat');
* shape.fillPatternRepeat('repeat-x');
*
* // do not repeat the pattern
* shape.fillPatternRepeat('no repeat');
* shape.fillPatternRepeat('no-repeat');
*/
Factory.addGetterSetter(Shape, 'fillEnabled', true);

65
test/sandbox2.html
View File

@@ -1,78 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<script src="../../konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Canvas Scrolling Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
height: 100%;
overflow: auto;
}
#large-container {
width: 3000px;
height: 3000px;
overflow: hidden;
}
#scroll-container {
width: calc(100% - 22px);
height: calc(100vh - 22px);
overflow: auto;
margin: 10px;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="large-container"><div id="container"></div></div>
</div>
<canvas id="canvas"></div>
<script>
var WIDTH = 3000;
var HEIGHT = 3000;
var NUMBER = 200;
var htmlCanvas = document.getElementById("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Konva.Layer();
stage.add(layer);
function generateNode() {
return new Konva.Circle({
x: WIDTH * Math.random(),
y: HEIGHT * Math.random(),
radius: 50,
fill: 'red',
stroke: 'black'
});
}
for (var i = 0; i < NUMBER; i++) {
layer.add(generateNode());
}
layer.draw();
var scrollContainer = document.getElementById('scroll-container');
scrollContainer.addEventListener('scroll', function() {
var dx = scrollContainer.scrollLeft;
var dy = scrollContainer.scrollTop;
stage.container().style.transform =
'translate(' + dx + 'px, ' + dy + 'px)';
stage.x(-dx);
stage.y(-dy);
stage.batchDraw();
});
var w = new Worker('./worker.js');
w.onmessage = function(event) {
document.getElementById('result').innerHTML = event.data;
};
</script>
</body>
</html>