fix konva-node

2026-01-22 21:02:26 +08:00 · 2019-06-07 15:05:27 -05:00
parent 3e95726b4d
commit 0c858ff591
5 changed files with 69 additions and 1346 deletions
--- a/konva-node/demo.js
+++ b/konva-node/demo.js
@@ -0,0 +1,71 @@
+var fs = require('fs');
+
+// relative path here
+// but you will need just require('konva-node');
+var Konva = require('./');
+
+// Create stage. Container parameter is not required in NodeJS.
+var stage = new Konva.Stage({
+  width: 100,
+  height: 100
+});
+
+var layer = new Konva.Layer();
+stage.add(layer);
+var rect = new Konva.Rect({
+  width: 100,
+  height: 100,
+  x: 50,
+  y: 50,
+  fill: 'white'
+});
+var text = new Konva.Text({
+  text: 'Generated inside node js',
+  x: 20,
+  y: 20,
+  fill: 'black'
+});
+layer.add(rect).add(text);
+layer.draw();
+stage.setSize({
+  width: 200,
+  height: 200
+});
+
+// check tween works
+var tween = new Konva.Tween({
+  node: rect,
+  duration: 1,
+  x: -50
+});
+tween.play();
+
+// After tween we want to convert stage to dataURL
+setTimeout(function() {
+  stage.toDataURL({
+    callback: function(data) {
+      // Then add result to stage
+      var img = new Konva.window.Image();
+      img.onload = function() {
+        var image = new Konva.Image({
+          image: img,
+          x: 10,
+          y: 50
+        });
+        layer.add(image);
+        layer.draw();
+        // save stage image as file
+        stage.toDataURL({
+          callback: function(data) {
+            var base64Data = data.replace(/^data:image\/png;base64,/, '');
+            fs.writeFile('./out.png', base64Data, 'base64', function(err) {
+              err && console.log(err);
+              console.log('See out.png');
+            });
+          }
+        });
+      };
+      img.src = data;
+    }
+  });
+}, 1050);
--- a/konva-node/index.js
+++ b/konva-node/index.js
@@ -1,25 +1,33 @@
 var Konva = require('konva');
+var canvas = require('canvas');

-var Canvas = require('canvas');
-
+// mock window
 Konva.window = {
-  Image: Canvas.Image,
+  Image: canvas.Image,
  devicePixelRatio: 1
 };
+// mock document
 Konva.document = {
  createElement: function() {},
  documentElement: {
    addEventListener: function() {}
  }
 };
-Konva.window = new JSDOM(
-  '<!DOCTYPE html><html><head></head><body></body></html>'
-).window;
-Konva.document = Konva.window.document;
-Konva.window.Image = Canvas.Image;

-Konva.Util.createCanvasElement = () => {
-  return new Canvas();
+// make some global injections
+global.window = Konva.window;
+global.requestAnimationFrame = cb => {
+  setImmediate(cb);
 };

+// create canvas in Node env
+Konva.Util.createCanvasElement = () => {
+  const node = new canvas.Canvas();
+  node.style = {};
+  return node;
+};
+
+// _checkVisibility use dom element, in node we can skip it
+Konva.Stage.prototype._checkVisibility = () => {};
+
 module.exports = Konva;
--- a/konva-node/package.json
+++ b/konva-node/package.json
@@ -25,7 +25,7 @@
  },
  "license": "MIT",
  "dependencies": {
-    "canvas": "^1.6.13",
-    "konva": "^2.6.0"
+    "canvas": "^2.5.0",
+    "konva": "^3.3.2"
  }
 }