lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better NodeJS support (full stage support)

Browse Source
This commit is contained in:
Лаврёнов Антон 2014-02-28 10:37:57 +08:00
parent 5cbb73a079
commit 9397a96127
7 changed files with 84 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
nodejs-demo.js
View File

@ -1,11 +1,13 @@
var fs = require('fs'), var fs = require('fs'),
Kinetic = require('./kinetic'); Kinetic = require('./dist/kinetic-dev');
var layer = new Kinetic.Layer({ var stage = new Kinetic.Stage({
width : 200, width : 100,
height : 200 height : 100
}); });
var layer = new Kinetic.Layer();
stage.add(layer);
var rect = new Kinetic.Rect({ var rect = new Kinetic.Rect({
width : 100, width : 100,
height : 100, height : 100,
@ -21,9 +23,45 @@ var text = new Kinetic.Text({
}); });
layer.add(rect).add(text); layer.add(rect).add(text);
layer.draw(); layer.draw();
stage.setSize({
width : 200,
height : 200
});
var stream = layer.createPNGStream(); // check tween works
var file = fs.createWriteStream(__dirname + '/helloworld.png'); var tween = new Kinetic.Tween({
stream.on('data', function(chunk) { node : rect,
file.write(chunk); 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);

22
src/Animation.js
View File

@ -1,10 +1,10 @@
(function(root) { (function() {
var BATCH_DRAW_STOP_TIME_DIFF = 500; var BATCH_DRAW_STOP_TIME_DIFF = 500;
var now =(function() { var now =(function() {
if (root.performance && root.performance.now) { if (Kinetic.root.performance && Kinetic.root.performance.now) {
return function() { return function() {
return root.performance.now(); return Kinetic.root.performance.now();
}; };
} }
else { else {
@ -15,20 +15,20 @@
})(); })();
var RAF = (function() { var RAF = (function() {
return root.requestAnimationFrame return Kinetic.root.requestAnimationFrame
|| root.webkitRequestAnimationFrame || Kinetic.root.webkitRequestAnimationFrame
|| root.mozRequestAnimationFrame || Kinetic.root.mozRequestAnimationFrame
|| root.oRequestAnimationFrame || Kinetic.root.oRequestAnimationFrame
|| root.msRequestAnimationFrame || Kinetic.root.msRequestAnimationFrame
|| FRAF; || FRAF;
})(); })();
function FRAF(callback) { function FRAF(callback) {
root.setTimeout(callback, 1000 / 60); Kinetic.root.setTimeout(callback, 1000 / 60);
} }
function requestAnimFrame() { function requestAnimFrame() {
return RAF.apply(root, arguments); return RAF.apply(Kinetic.root, arguments);
} }
/** /**
@ -294,4 +294,4 @@
layer.batchDraw(); layer.batchDraw();
}); });
}; };
})(this); })((1,eval)('this'));

6
src/DragAndDrop.js
View File

@ -254,11 +254,7 @@
* node.draggable(false); * node.draggable(false);
*/ */
var html = Kinetic.document.documentElement;
if (!Kinetic.Util.isBrowser()) {
return;
}
var html = document.documentElement;
html.addEventListener('mouseup', Kinetic.DD._endDragBefore, true); html.addEventListener('mouseup', Kinetic.DD._endDragBefore, true);
html.addEventListener('touchend', Kinetic.DD._endDragBefore, true); html.addEventListener('touchend', Kinetic.DD._endDragBefore, true);

15
src/Global.js
View File

@ -288,15 +288,28 @@ var Kinetic = {};
// only CommonJS-like enviroments that support module.exports, // only CommonJS-like enviroments that support module.exports,
// like Node. // like Node.
var Canvas = require('canvas'); 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(); var KineticJS = factory();
Kinetic.document = doc;
Kinetic.window = Kinetic.document.createWindow();
Kinetic.window.Image = Canvas.Image;
Kinetic.root = root;
Kinetic._nodeCanvas = Canvas; Kinetic._nodeCanvas = Canvas;
module.exports = KineticJS; module.exports = KineticJS;
return;
} }
else if( typeof define === 'function' && define.amd) { else if( typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module. // AMD. Register as an anonymous module.
define(factory); 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. // Just return a value to define the module export.
// This example returns an object, but the module // This example returns an object, but the module

9
src/Stage.js
View File

@ -57,6 +57,8 @@
Kinetic.Util.addMethods(Kinetic.Stage, { Kinetic.Util.addMethods(Kinetic.Stage, {
___init: function(config) { ___init: function(config) {
this.nodeType = STAGE; this.nodeType = STAGE;
// default container id. usefull for nodejs
config.container = config.container || 'con';
// call super constructor // call super constructor
Kinetic.Container.call(this, config); Kinetic.Container.call(this, config);
this._id = Kinetic.idCounter++; this._id = Kinetic.idCounter++;
@ -78,7 +80,7 @@
*/ */
setContainer: function(container) { setContainer: function(container) {
if( typeof container === STRING) { if( typeof container === STRING) {
container = document.getElementById(container); container = Kinetic.document.getElementById(container);
} }
this._setAttr(CONTAINER, container); this._setAttr(CONTAINER, container);
return this; return this;
@ -217,7 +219,7 @@
function drawLayer(n) { function drawLayer(n) {
var layer = layers[n], var layer = layers[n],
layerUrl = layer.toDataURL(), layerUrl = layer.toDataURL(),
imageObj = new Image(); imageObj = new Kinetic.window.Image();
imageObj.onload = function() { imageObj.onload = function() {
_context.drawImage(imageObj, 0, 0); _context.drawImage(imageObj, 0, 0);
@ -624,12 +626,11 @@
}, },
_buildDOM: function() { _buildDOM: function() {
var container = this.getContainer(); var container = this.getContainer();
// clear content inside container // clear content inside container
container.innerHTML = EMPTY_STRING; container.innerHTML = EMPTY_STRING;
// content // content
this.content = document.createElement(DIV); this.content = Kinetic.document.createElement(DIV);
this.content.style.position = RELATIVE; this.content.style.position = RELATIVE;
this.content.style.display = INLINE_BLOCK; this.content.style.display = INLINE_BLOCK;
this.content.className = KINETICJS_CONTENT; this.content.className = KINETICJS_CONTENT;

16
src/Util.js
View File

@ -368,13 +368,7 @@
return names.length > 0; return names.length > 0;
}, },
createCanvasElement: function() { createCanvasElement: function() {
var canvas; var canvas = Kinetic.document.createElement('canvas');
if (Kinetic.Util.isBrowser()) {
canvas = document.createElement('canvas');
} else {
// nodejs way
canvas = new Kinetic._nodeCanvas(200,200);
}
canvas.style = canvas.style || {}; canvas.style = canvas.style || {};
return canvas; return canvas;
}, },
@ -383,7 +377,7 @@
}, },
_isInDocument: function(el) { _isInDocument: function(el) {
while(el = el.parentNode) { while(el = el.parentNode) {
if(el == document) { if(el == Kinetic.document) {
return true; return true;
} }
} }
@ -427,7 +421,7 @@
// if arg is a string, then it's a data url // if arg is a string, then it's a data url
else if(this._isString(arg)) { else if(this._isString(arg)) {
imageObj = new Image(); imageObj = new Kinetic.window.Image();
imageObj.onload = function() { imageObj.onload = function() {
callback(imageObj); callback(imageObj);
}; };
@ -436,7 +430,7 @@
//if arg is an object that contains the data property, it's an image object //if arg is an object that contains the data property, it's an image object
else if(arg.data) { else if(arg.data) {
canvas = document.createElement(CANVAS); canvas = Kinetic.Util.createCanvasElement();
canvas.width = arg.width; canvas.width = arg.width;
canvas.height = arg.height; canvas.height = arg.height;
var _context = canvas.getContext(CONTEXT_2D); var _context = canvas.getContext(CONTEXT_2D);
@ -591,7 +585,7 @@
* IE9 on Windows7 64bit will throw a JS error * IE9 on Windows7 64bit will throw a JS error
* if we don't use window.console in the conditional * 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); console.warn(KINETIC_WARNING + str);
} }
}, },

2
src/plugins/TextPath.js
View File

@ -43,7 +43,7 @@
Kinetic.TextPath.prototype = { Kinetic.TextPath.prototype = {
___init: function(config) { ___init: function(config) {
var that = this; var that = this;
this.dummyCanvas = document.createElement('canvas'); this.dummyCanvas = Kinetic.Util.createCanvasElement();
this.dataArray = []; this.dataArray = [];
// call super constructor // call super constructor