We get acquainted with Fabric.js. Part 4
This is a translation of the fourth part of a series of articles on the open Javascript canvas library, Fabric.js.
We already know a lot from the previous parts of the series: ( P1 , P2 , P3 ) from simple manipulations with objects to animations, events, groups and subclasses. But there are some more interesting and useful things that should be covered.
What
We already know a lot from the previous parts of the series: ( P1 , P2 , P3 ) from simple manipulations with objects to animations, events, groups and subclasses. But there are some more interesting and useful things that should be covered.
Free drawing
What
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.canvas ,
isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .,
isDrawingMode false , canvas. fabric.Path : , , .., :
freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , ., . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – .
object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .,
, "hasControls" "hasBorders".
false , "".object.hasBorders = false;object.hasControls = false;, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });, "selection" canvas
false . , canvas. , "selectable" false . ., ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;- "selectionDashArray" – . . , . , , -
[10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind"
true .1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. ,
false . . , , ."centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , .
true , , 1.0, / . 1.0. ."originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();, .
setBackgroundImage , url .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));, . canvas.
setOverlayImage , : url, .canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. ,
npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object", "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });node helloworld.js . helloworld.png :? .
Fabric (
fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).(
new fabric.Text() ) canvas ( canvas.add(text) ).Fabric canvas, -. , canvas?
createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });,
node customfont.js , (customfont.png) :. - ,
new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier )., fontFamily
fabric.Text . fontWeight fontStyle font faces, . 2- ., , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
, . Canvas - 2D , . - . , Fabric .
, true isDrawingMode Fabric canvas. canvas /.
canvas , isDrawingMode true . , "mouseup", Fabric "path:created", fabric.Path .
, isDrawingMode false , canvas. fabric.Path : , , ..
, : freeDrawingBrush.color freeDrawingBrush.width . freeDrawingBrush , Fabric canvas. freeDrawingBrush.color . freeDrawingBrush.width , .
, . , Fabric image.
Fabric, . canvas, canvas, , . .
canvas . "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX" "lockScalingY" – . object.lockMovementX true , . . lockRotation , lockScalingX/lockScalingY — . , .
,
, "hasControls" "hasBorders". false , "".
object.hasBorders = false;
object.hasControls = false;
, "borderColor", "cornerColor", "cornerSize".
object.set({ borderColor: 'red', cornerColor: 'green', cornerSize: 6 });
, "selection" canvas false . , canvas. , "selectable" false . .
, ? .
4 canvas, - "selectionColor", "selectionBorderColor", "selectionLineWidth", "selectionDashArray". , , . :
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.selectionColor = 'rgba(0,255,0,0.3)'; canvas.selectionBorderColor = 'red'; canvas.selectionLineWidth = 5;
- "selectionDashArray" – . . , . , , - [10, 5] "selectionDashArray". 10px, 5px, , . [2, 4, 6] , : 2px, 4px, , 6px . , [5, 10] :
"selectionDashArray" canvas, Fabric "strokeDashArray", .
var rect = new fabric.Rect({ fill: '#06538e', width: 125, height: 125, stroke: 'red', strokeDashArray: [5, 5] }); canvas.add(rect);
, Fabric , , , / . , , , . :
Fabric canvas . , , : , "perPixelTargetFind" true .
1.0 Fabric UI. , , . . , - "hasRotatingPoint". "rotatingPointOffset".
, 1.0 , , . - "uniScaleTransform" canvas. , false . . , , .
"centeredScaling" "centeredRotation" ( 1.3.4 - "centerTransform"). , . true , , 1.0, / . 1.0. .
"originX" "originY". "left" "top". . , , " ".
? , -. , , "originX" "originY" . -, originX "center". – originX "right" .. "position: absolute" CSS.
canvas
, , 1- , canvas. "backgroundColor".
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.backgroundColor = 'rgba(0,0,255,0.3)'; canvas.renderAll();
, . setBackgroundImage , url .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
, . canvas. setOverlayImage , : url, .
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
Fabric Node.js
Fabric – , , ! , . Fabric API , .
, Node, Fabric.
, Node.js , . , , . .
Node.js, node-canvas . – canvas NodeJS. Cairo — 2D , Mac, Linux, Windows. node-canvas , .
Fabric Node (NPM). – NPM. github .
– Fabric package , NPM. , npm install fabric ( npm install -g fabric ). , , node-canvas Fabric:
> node ... > typeof require('canvas'); // "function" > typeof require('fabric'); // "object"
, "hello world" . helloworld.js .
var fs = require('fs'), fabric = require('fabric').fabric, out = fs.createWriteStream(__dirname + '/helloworld.png'); var canvas = fabric.createCanvasForNode(200, 200); var text = new fabric.Text('Hello world', { left: 100, top: 100, fill: '#f55', angle: 15 }); canvas.add(text); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
node helloworld.js . helloworld.png :
? .
Fabric ( fabric = require('fabric').fabric ) . - Fabric canvas, fabric.createCanvasForNode , new fabric.Canvas() . , canvas ( 200200).
( new fabric.Text() ) canvas ( canvas.add(text) ).
Fabric canvas, -. , canvas? createPNGStream canvas. Node stream , . on('data') , ( fs.createWriteStream() ), .
fabric.createCanvasForNode fabric.Canvas#createPNGStream – Node. -: , , .. , canvas createCanvasForNode , canvas nodeCanvas , node-canvas .
Node Fabric
, Node , Fabric JSON , . 25 !
var fabric = require('fabric').fabric, http = require('http'), url = require('url'), PORT = 8124; var server = http.createServer(function (request, response) { var params = url.parse(request.url, true); var canvas = fabric.createCanvasForNode(200, 200); response.writeHead(200, { 'Content-Type': 'image/png' }); canvas.loadFromJSON(params.query.data, function() { canvas.renderAll(); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { response.write(chunk); }); stream.on('end', function() { response.end(); }); }); }); server.listen(PORT);
. . Fabric canvas, JSON , .
, .
{"objects":[{"type":"rect","left":103.85,"top":98.85,"width":50,"height":50,"fill":"#9ae759","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1.39,"scaleY":1.39,"angle":30,"flipX":false,"flipY":false,"opacity":0.8,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}
URI :
%7B"objects"%3A%5B%7B"type"%3A"rect"%2C"left"%3A103.85%2C"top"%3A98.85%2C"width"%3A50%2C"height"%3A50%2C"fill"%3A"%239ae759"%2C"overlayFill"%3Anull%2C"stroke"%3Anull%2C"strokeWidth"%3A1%2C"strokeDashArray"%3Anull%2C"scaleX"%3A1.39%2C"scaleY"%3A1.39%2C"angle"%3A30%2C"flipX"%3Afalse%2C"flipY"%3Afalse%2C"opacity"%3A0.8%2C"selectable"%3Atrue%2C"hasControls"%3Atrue%2C"hasBorders"%3Atrue%2C"hasRotatingPoint"%3Afalse%2C"transparentCorners"%3Atrue%2C"perPixelTargetFind"%3Afalse%2C"rx"%3A0%2C"ry"%3A0%7D%5D%2C"background"%3A"rgba(0%2C%200%2C%200%2C%200)"%7D
"data". "image/png" :
, Fabric . . , canvas, , .
Fabric Node
Fabric, . ( ) – CSS3 @font-face rule . Fabric Node ( ) node-canvas Font API , .
, . customfont.js , , . Ubuntu .
var fs = require('fs'), fabric = require('fabric').fabric, canvas = fabric.createCanvasForNode(300, 250); var font = new canvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf'); font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold'); font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic'); font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic'); canvas.contextContainer.addFont(font); // createPNGStream createJPEGStream //canvas.contextTop.addFont(font); // toDataURL toDataURLWithMultiplier var text = new fabric.Text('regular', { left: 150, top: 50, fontFamily: 'Ubuntu' }); canvas.add(text); text = new fabric.Text('bold', { left: 150, top: 100, fontFamily: 'Ubuntu', fontWeight: 'bold' }); canvas.add(text); text = new fabric.Text('italic', { left: 150, top: 150, fontFamily: 'Ubuntu', fontStyle: 'italic' }); canvas.add(text); text = new fabric.Text('bold italic', { left: 150, top: 200, fontFamily: 'Ubuntu', fontWeight: 'bold', fontStyle: 'italic' }); canvas.add(text); var out = fs.createWriteStream(__dirname + '/customfont.png'); var stream = canvas.createPNGStream(); stream.on('data', function(chunk) { out.write(chunk); });
, node customfont.js , (customfont.png) :
. - , new canvas.Font() , ( name ) ( path ) . font-faces, font.addFace() . ( path ), ( weight ) ( style ). , . , canvas.contextContainer.addFont() ( createPNGStream createJPEGStream ) , canvas.contextTop.addFont() ( toDataURL toDataURLWithMultiplier ).
, fontFamily fabric.Text . fontWeight fontStyle font faces, . 2- .
, , , -, -, JSON.
Fabric. , , - , , , , !
.
')
Source: https://habr.com/ru/post/257401/
All Articles