[Fabric.js]SVGをcanvasに転写する

Fabric.jsは、canvasを操作するためのJavascriptライブラリです。
同様のライブラリは多数ありますがFabricの特徴は、内部にSVGパーサーを持ちsvgからcanvasへのインポートおよびcanvasからsvgへのエクスポートを行う機能があります。

//canvas要素の取得
var canvas = new fabric.Canvas('canvas');
canvas.setWidth(300);
canvas.setHeight(300);

//SVG要素取得
var SVGstring = document.getElementById('wrapSVG').innerHTML;  

//SVGをcanvasへ転写
fabric.loadSVGFromString(SVGstring , function(objects, options) {
	options.top = 0;
	options.left = 0;
	var svgGroups = fabric.util.groupSVGElements(objects, options);
	canvas.add(svgGroups).renderAll();
});

//canvas要素の取得

var canvas = new fabric.Canvas('canvas');

canvas.setWidth(300);

canvas.setHeight(300);

//SVG要素取得

var SVGstring = document.getElementById('wrapSVG').innerHTML;

//SVGをcanvasへ転写

fabric.loadSVGFromString(SVGstring , function(objects, options) {

options.top = 0;

options.left = 0;

var svgGroups = fabric.util.groupSVGElements(objects, options);

canvas.add(svgGroups).renderAll();

});

注意点としては、svg要素のサイズとcanvas要素のサイズをそろえないと正しいサイズで転写されません。

D3.js & Fabric.js

Fabric.jsとD3.jsを組み合わせることで、D3.jsで作成した地図(SVG)をcanvasへ転写することもできます。

var path, map, xy;
xy = d3.geo
	.mercator()		//投影法の指定
	.scale(12000)	//スケール（ズーム）の指定
	.center([139.0032936, 36.3219088]); //中心の座標を指定


path = d3.geo.path().projection(xy);　//投影

map = d3.select("svg"); //地図用のステージ(SVGタグ)を作成


var gunma = d3.json("gunma.geojson", function(json) {
	map.append("svg:g")
		.attr("class", "gunma")
		.selectAll("path")
		.data(json.features)
		.enter()
		.append("svg:path")
		.attr("d", path)  //dataに投影法を適応
		.attr("fill-opacity", 1)
		.attr("fill", "green")
		.attr("stroke", "#222")
		.attr("transform", "translate (" +[-350 ,-50] + ")")

	canvasDraw();		
});


//fabric.jsを使ってcanvasに転写
function canvasDraw(){
	var canvas = new fabric.Canvas('canvas');
	canvas.setWidth(300);
	canvas.setHeight(300);
		
	var SVGstring = document.getElementById('wrapSVG').innerHTML;  //SVG取得
	fabric.loadSVGFromString(SVGstring , function(objects, options) {
		options.top = 0;
		options.left = 0;
		var svgGroups = fabric.util.groupSVGElements(objects, options);

		canvas.add(svgGroups).renderAll();
	});
}

var path, map, xy;

xy = d3.geo

.mercator() //投影法の指定

.scale(12000) //スケール（ズーム）の指定

.center([139.0032936, 36.3219088]); //中心の座標を指定

path = d3.geo.path().projection(xy);　//投影

map = d3.select("svg"); //地図用のステージ(SVGタグ)を作成

var gunma = d3.json("gunma.geojson", function(json) {

map.append("svg:g")

.attr("class", "gunma")

.selectAll("path")

.data(json.features)

.enter()

.append("svg:path")

.attr("d", path) //dataに投影法を適応

.attr("fill-opacity", 1)

.attr("fill", "green")

.attr("stroke", "#222")

.attr("transform", "translate (" +[-350 ,-50] + ")")

canvasDraw();

});

//fabric.jsを使ってcanvasに転写

function canvasDraw(){

var canvas = new fabric.Canvas('canvas');

canvas.setWidth(300);

canvas.setHeight(300);

var SVGstring = document.getElementById('wrapSVG').innerHTML; //SVG取得

fabric.loadSVGFromString(SVGstring , function(objects, options) {

options.top = 0;

options.left = 0;

var svgGroups = fabric.util.groupSVGElements(objects, options);

canvas.add(svgGroups).renderAll();

});

}

example

動的に作成したグラフ(SVG)をキャンバスに転写しdata URI schemeとして出力すれば、グラフを画像としてダウンロードする機能なども比較的簡単に作成できます。

……ただ、axis(目盛り)の転写がいまのところ上手くいきません。　orz

D3.js & Fabric.js

投稿者: shimizu