{"id":2892,"date":"2013-06-18T19:24:33","date_gmt":"2013-06-18T10:24:33","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2892"},"modified":"2013-12-30T21:24:25","modified_gmt":"2013-12-30T12:24:25","slug":"post-2892","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/2892","title":{"rendered":"[Fabric.js]SVG\u3092canvas\u306b\u8ee2\u5199\u3059\u308b"},"content":{"rendered":"<p><a href=\"http:\/\/fabricjs.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/06\/fablic.jpg\" alt=\"fablic\" width=\"493\" height=\"470\" class=\"aligncenter size-full wp-image-2893\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/06\/fablic.jpg 493w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/06\/fablic-157x150.jpg 157w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/fabricjs.com\/\">Fabric.js<\/a>\u306f\u3001canvas\u3092\u64cd\u4f5c\u3059\u308b\u305f\u3081\u306eJavascript\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<br \/>\n\u540c\u69d8\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u591a\u6570\u3042\u308a\u307e\u3059\u304cFabric\u306e\u7279\u5fb4\u306f\u3001\u5185\u90e8\u306bSVG\u30d1\u30fc\u30b5\u30fc\u3092\u6301\u3061svg\u304b\u3089canvas\u3078\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\u304a\u3088\u3073canvas\u304b\u3089svg\u3078\u306e\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3092\u884c\u3046\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" title=\"SVG\u8981\u7d20\u3092canvas\u3078\u8ee2\u5199\u3059\u308b\" >\/\/canvas\u8981\u7d20\u306e\u53d6\u5f97\r\nvar canvas = new fabric.Canvas('canvas');\r\ncanvas.setWidth(300);\r\ncanvas.setHeight(300);\r\n\r\n\/\/SVG\u8981\u7d20\u53d6\u5f97\r\nvar SVGstring = document.getElementById('wrapSVG').innerHTML;  \r\n\r\n\/\/SVG\u3092canvas\u3078\u8ee2\u5199\r\nfabric.loadSVGFromString(SVGstring , function(objects, options) {\r\n\toptions.top = 0;\r\n\toptions.left = 0;\r\n\tvar svgGroups = fabric.util.groupSVGElements(objects, options);\r\n\tcanvas.add(svgGroups).renderAll();\r\n});<\/pre>\n<p>\u6ce8\u610f\u70b9\u3068\u3057\u3066\u306f\u3001svg\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3068canvas\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3092\u305d\u308d\u3048\u306a\u3044\u3068\u6b63\u3057\u3044\u30b5\u30a4\u30ba\u3067\u8ee2\u5199\u3055\u308c\u307e\u305b\u3093\u3002<\/p>\n<h2>D3.js &#038; Fabric.js<\/h2>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/fabric\/01\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/06\/d3_fablic-e1371550956952.jpg\" alt=\"d3_fablic\" width=\"561\" height=\"539\" class=\"aligncenter size-full wp-image-2894\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/06\/d3_fablic-e1371550956952.jpg 561w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/06\/d3_fablic-e1371550956952-156x150.jpg 156w\" sizes=\"auto, (max-width: 561px) 100vw, 561px\" \/><\/a><\/p>\n<p>Fabric.js\u3068D3.js\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001D3.js\u3067\u4f5c\u6210\u3057\u305f\u5730\u56f3(SVG)\u3092canvas\u3078\u8ee2\u5199\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" title=\"D3 &amp; Fabric\" >var path, map, xy;\r\nxy = d3.geo\r\n\t.mercator()\t\t\/\/\u6295\u5f71\u6cd5\u306e\u6307\u5b9a\r\n\t.scale(12000)\t\/\/\u30b9\u30b1\u30fc\u30eb\uff08\u30ba\u30fc\u30e0\uff09\u306e\u6307\u5b9a\r\n\t.center([139.0032936, 36.3219088]); \/\/\u4e2d\u5fc3\u306e\u5ea7\u6a19\u3092\u6307\u5b9a\r\n\r\n\r\npath = d3.geo.path().projection(xy);\u3000\/\/\u6295\u5f71\r\n\r\nmap = d3.select(&quot;svg&quot;); \/\/\u5730\u56f3\u7528\u306e\u30b9\u30c6\u30fc\u30b8(SVG\u30bf\u30b0)\u3092\u4f5c\u6210\r\n\r\n\r\nvar gunma = d3.json(&quot;gunma.geojson&quot;, function(json) {\r\n\tmap.append(&quot;svg:g&quot;)\r\n\t\t.attr(&quot;class&quot;, &quot;gunma&quot;)\r\n\t\t.selectAll(&quot;path&quot;)\r\n\t\t.data(json.features)\r\n\t\t.enter()\r\n\t\t.append(&quot;svg:path&quot;)\r\n\t\t.attr(&quot;d&quot;, path)  \/\/data\u306b\u6295\u5f71\u6cd5\u3092\u9069\u5fdc\r\n\t\t.attr(&quot;fill-opacity&quot;, 1)\r\n\t\t.attr(&quot;fill&quot;, &quot;green&quot;)\r\n\t\t.attr(&quot;stroke&quot;, &quot;#222&quot;)\r\n\t\t.attr(&quot;transform&quot;, &quot;translate (&quot; +[-350 ,-50] + &quot;)&quot;)\r\n\r\n\tcanvasDraw();\t\t\r\n});\r\n\r\n\r\n\/\/fabric.js\u3092\u4f7f\u3063\u3066canvas\u306b\u8ee2\u5199\r\nfunction canvasDraw(){\r\n\tvar canvas = new fabric.Canvas('canvas');\r\n\tcanvas.setWidth(300);\r\n\tcanvas.setHeight(300);\r\n\t\t\r\n\tvar SVGstring = document.getElementById('wrapSVG').innerHTML;  \/\/SVG\u53d6\u5f97\r\n\tfabric.loadSVGFromString(SVGstring , function(objects, options) {\r\n\t\toptions.top = 0;\r\n\t\toptions.left = 0;\r\n\t\tvar svgGroups = fabric.util.groupSVGElements(objects, options);\r\n\r\n\t\tcanvas.add(svgGroups).renderAll();\r\n\t});\r\n}<\/pre>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/fabric\/01\/\">example<\/a><\/p>\n<p>\u52d5\u7684\u306b\u4f5c\u6210\u3057\u305f\u30b0\u30e9\u30d5(SVG)\u3092\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u8ee2\u5199\u3057data URI scheme\u3068\u3057\u3066\u51fa\u529b\u3059\u308c\u3070\u3001\u30b0\u30e9\u30d5\u3092\u753b\u50cf\u3068\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u6a5f\u80fd\u306a\u3069\u3082\u6bd4\u8f03\u7684\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u2026\u2026\u305f\u3060\u3001<a href=\"http:\/\/shimz.me\/example\/d3js\/fabric\/02\/\">axis(\u76ee\u76db\u308a)\u306e\u8ee2\u5199<\/a>\u304c\u3044\u307e\u306e\u3068\u3053\u308d\u4e0a\u624b\u304f\u3044\u304d\u307e\u305b\u3093\u3002\u3000orz<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fabric.js\u306f\u3001canvas\u3092\u64cd\u4f5c\u3059\u308b\u305f\u3081\u306e&hellip;<\/p>\n","protected":false},"author":1,"featured_media":2893,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-2892","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=2892"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2892\/revisions"}],"predecessor-version":[{"id":3277,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2892\/revisions\/3277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2893"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}