mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
Better NodeJS support (full stage support)
This commit is contained in:
Лаврёнов Антон
parent
5cbb73a079
commit
9397a96127
@ -1,11 +1,13 @@
|
||||
var fs = require('fs'),
|
||||
Kinetic = require('./kinetic');
|
||||
Kinetic = require('./dist/kinetic-dev');
|
||||
|
||||
var layer = new Kinetic.Layer({
|
||||
width : 200,
|
||||
height : 200
|
||||
var stage = new Kinetic.Stage({
|
||||
width : 100,
|
||||
height : 100
|
||||
});
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
stage.add(layer);
|
||||
var rect = new Kinetic.Rect({
|
||||
width : 100,
|
||||
height : 100,
|
||||
@ -21,9 +23,45 @@ var text = new Kinetic.Text({
|
||||
});
|
||||
layer.add(rect).add(text);
|
||||
layer.draw();
|
||||
stage.setSize({
|
||||
width : 200,
|
||||
height : 200
|
||||
});
|
||||
|
||||
var stream = layer.createPNGStream();
|
||||
var file = fs.createWriteStream(__dirname + '/helloworld.png');
|
||||
stream.on('data', function(chunk) {
|
||||
file.write(chunk);
|
||||
});
|
||||
// check tween works
|
||||
var tween = new Kinetic.Tween({
|
||||
node : rect,
|
||||
duration : 1,
|
||||
x : -50
|
||||
});
|
||||
tween.play();
|
||||
|
||||
setTimeout(function(){
|
||||
stage.toDataURL({
|
||||
callback: function(data){
|
||||
// adding image to stage
|
||||
var img = new Kinetic.window.Image();
|
||||
img.onload = function() {
|
||||
var image = new Kinetic.Image({
|
||||
image : img,
|
||||
x : 10
|
||||
});
|
||||
layer.add(image);
|
||||
layer.draw();
|
||||
// save stage to disk
|
||||
stage.toDataURL({
|
||||
callback: function(data){
|
||||
console.log(1);
|
||||
var base64Data = data.replace(/^data:image\/png;base64,/,"");
|
||||
|
||||
fs.writeFile("out.png", base64Data, 'base64', function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
img.src = data;
|
||||
|
||||
}
|
||||
});
|
||||
}, 1050);
|
||||
@ -1,10 +1,10 @@
|
||||
(function(root) {
|
||||
(function() {
|
||||
var BATCH_DRAW_STOP_TIME_DIFF = 500;
|
||||
|
||||
var now =(function() {
|
||||
if (root.performance && root.performance.now) {
|
||||
if (Kinetic.root.performance && Kinetic.root.performance.now) {
|
||||
return function() {
|
||||
return root.performance.now();
|
||||
return Kinetic.root.performance.now();
|
||||
};
|
||||
}
|
||||
else {
|
||||
@ -15,20 +15,20 @@
|
||||
})();
|
||||
|
||||
var RAF = (function() {
|
||||
return root.requestAnimationFrame
|
||||
|| root.webkitRequestAnimationFrame
|
||||
|| root.mozRequestAnimationFrame
|
||||
|| root.oRequestAnimationFrame
|
||||
|| root.msRequestAnimationFrame
|
||||
return Kinetic.root.requestAnimationFrame
|
||||
|| Kinetic.root.webkitRequestAnimationFrame
|
||||
|| Kinetic.root.mozRequestAnimationFrame
|
||||
|| Kinetic.root.oRequestAnimationFrame
|
||||
|| Kinetic.root.msRequestAnimationFrame
|
||||
|| FRAF;
|
||||
})();
|
||||
|
||||
function FRAF(callback) {
|
||||
root.setTimeout(callback, 1000 / 60);
|
||||
Kinetic.root.setTimeout(callback, 1000 / 60);
|
||||
}
|
||||
|
||||
function requestAnimFrame() {
|
||||
return RAF.apply(root, arguments);
|
||||
return RAF.apply(Kinetic.root, arguments);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -294,4 +294,4 @@
|
||||
layer.batchDraw();
|
||||
});
|
||||
};
|
||||
})(this);
|
||||
})((1,eval)('this'));
|
||||
@ -254,11 +254,7 @@
|
||||
* node.draggable(false);
|
||||
*/
|
||||
|
||||
|
||||
if (!Kinetic.Util.isBrowser()) {
|
||||
return;
|
||||
}
|
||||
var html = document.documentElement;
|
||||
var html = Kinetic.document.documentElement;
|
||||
html.addEventListener('mouseup', Kinetic.DD._endDragBefore, true);
|
||||
html.addEventListener('touchend', Kinetic.DD._endDragBefore, true);
|
||||
|
||||
|
||||
@ -288,15 +288,28 @@ var Kinetic = {};
|
||||
// only CommonJS-like enviroments that support module.exports,
|
||||
// like Node.
|
||||
var Canvas = require('canvas');
|
||||
var jsdom = require('jsdom').jsdom;
|
||||
var doc = jsdom('<!DOCTYPE html><html><head></head><body><div id="con"></div></body></html>');
|
||||
|
||||
var KineticJS = factory();
|
||||
|
||||
Kinetic.document = doc;
|
||||
Kinetic.window = Kinetic.document.createWindow();
|
||||
Kinetic.window.Image = Canvas.Image;
|
||||
Kinetic.root = root;
|
||||
Kinetic._nodeCanvas = Canvas;
|
||||
module.exports = KineticJS;
|
||||
return;
|
||||
}
|
||||
else if( typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(factory);
|
||||
}
|
||||
}(this, function() {
|
||||
Kinetic.document = document;
|
||||
Kinetic.window = window;
|
||||
Kinetic.root = root;
|
||||
|
||||
}((1, eval)('this'), function() {
|
||||
|
||||
// Just return a value to define the module export.
|
||||
// This example returns an object, but the module
|
||||
|
||||
@ -57,6 +57,8 @@
|
||||
Kinetic.Util.addMethods(Kinetic.Stage, {
|
||||
___init: function(config) {
|
||||
this.nodeType = STAGE;
|
||||
// default container id. usefull for nodejs
|
||||
config.container = config.container || 'con';
|
||||
// call super constructor
|
||||
Kinetic.Container.call(this, config);
|
||||
this._id = Kinetic.idCounter++;
|
||||
@ -78,7 +80,7 @@
|
||||
*/
|
||||
setContainer: function(container) {
|
||||
if( typeof container === STRING) {
|
||||
container = document.getElementById(container);
|
||||
container = Kinetic.document.getElementById(container);
|
||||
}
|
||||
this._setAttr(CONTAINER, container);
|
||||
return this;
|
||||
@ -217,7 +219,7 @@
|
||||
function drawLayer(n) {
|
||||
var layer = layers[n],
|
||||
layerUrl = layer.toDataURL(),
|
||||
imageObj = new Image();
|
||||
imageObj = new Kinetic.window.Image();
|
||||
|
||||
imageObj.onload = function() {
|
||||
_context.drawImage(imageObj, 0, 0);
|
||||
@ -624,12 +626,11 @@
|
||||
},
|
||||
_buildDOM: function() {
|
||||
var container = this.getContainer();
|
||||
|
||||
// clear content inside container
|
||||
container.innerHTML = EMPTY_STRING;
|
||||
|
||||
// content
|
||||
this.content = document.createElement(DIV);
|
||||
this.content = Kinetic.document.createElement(DIV);
|
||||
this.content.style.position = RELATIVE;
|
||||
this.content.style.display = INLINE_BLOCK;
|
||||
this.content.className = KINETICJS_CONTENT;
|
||||
|
||||
16
src/Util.js
16
src/Util.js
@ -368,13 +368,7 @@
|
||||
return names.length > 0;
|
||||
},
|
||||
createCanvasElement: function() {
|
||||
var canvas;
|
||||
if (Kinetic.Util.isBrowser()) {
|
||||
canvas = document.createElement('canvas');
|
||||
} else {
|
||||
// nodejs way
|
||||
canvas = new Kinetic._nodeCanvas(200,200);
|
||||
}
|
||||
var canvas = Kinetic.document.createElement('canvas');
|
||||
canvas.style = canvas.style || {};
|
||||
return canvas;
|
||||
},
|
||||
@ -383,7 +377,7 @@
|
||||
},
|
||||
_isInDocument: function(el) {
|
||||
while(el = el.parentNode) {
|
||||
if(el == document) {
|
||||
if(el == Kinetic.document) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@ -427,7 +421,7 @@
|
||||
|
||||
// if arg is a string, then it's a data url
|
||||
else if(this._isString(arg)) {
|
||||
imageObj = new Image();
|
||||
imageObj = new Kinetic.window.Image();
|
||||
imageObj.onload = function() {
|
||||
callback(imageObj);
|
||||
};
|
||||
@ -436,7 +430,7 @@
|
||||
|
||||
//if arg is an object that contains the data property, it's an image object
|
||||
else if(arg.data) {
|
||||
canvas = document.createElement(CANVAS);
|
||||
canvas = Kinetic.Util.createCanvasElement();
|
||||
canvas.width = arg.width;
|
||||
canvas.height = arg.height;
|
||||
var _context = canvas.getContext(CONTEXT_2D);
|
||||
@ -591,7 +585,7 @@
|
||||
* IE9 on Windows7 64bit will throw a JS error
|
||||
* if we don't use window.console in the conditional
|
||||
*/
|
||||
if(window.console && console.warn) {
|
||||
if(Kinetic.root.console && console.warn) {
|
||||
console.warn(KINETIC_WARNING + str);
|
||||
}
|
||||
},
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
Kinetic.TextPath.prototype = {
|
||||
___init: function(config) {
|
||||
var that = this;
|
||||
this.dummyCanvas = document.createElement('canvas');
|
||||
this.dummyCanvas = Kinetic.Util.createCanvasElement();
|
||||
this.dataArray = [];
|
||||
|
||||
// call super constructor
|
||||
|
||||
Loading…
Reference in New Issue
Block a user