0

canvasへ描画した内容をSVGのパスデータへ変換して、SVGのパターンを適用させてみたいのですが、そもそも、canvasへ描画した内容をSVGのパスデータへ変換することは出来ますか?

検索してみたら下記ページが見つかったのですが、ここで記載されている内容は、canvasへ描画した内容をSVGへ取り込んでいるだけでSVGのパスデータへ変換しているわけではないのですか?

CanvasをSVGで利用する方法

1 件の回答 1

2

「canvasへ描画した内容をSVGのパスデータへ変換」に関しては、「パス」に変換されるかは不明ですが、この(古い)記事によると以下のようなライブラリがあるようです。

Method to convert HTML5 canvas to SVG?

Fabric.jsというのが、そういう機能(canvasとSVG間の相互変換)を持っているようです。

Fabric.js is a powerful and simpleJavascript HTML5 canvas library
Fabric provides interactive object model on top of canvas elementFabric also has SVG-to-canvas (and canvas-to-SVG) parser

Fabric.jsは、強力でシンプルなJavascript HTML5キャンバスライブラリです。
Fabricは、canvas elementFabricの上にインタラクティブなオブジェクトモデルを提供します。Fabricには、SVG-to-canvas(およびcanvas-to-SVG)パーサーもあります。

またgliffy/canvas2svgというのもあるようです。

This library turns your Canvas into SVG using javascript. In other words, this library lets you build an SVG document using the canvas api.
We create a mock 2d canvas context. Use the canvas context like you would on a normal canvas. As you call methods, we build up a scene graph in SVG.

このライブラリは、JavaScriptを使用してCanvasをSVGに変換します。 つまり、このライブラリーでは、canvas APIを使用してSVGドキュメントを構築できます。
模擬2Dキャンバスコンテキストを作成します。 通常のキャンバスと同じように、キャンバスコンテキストを使用します。 メソッドを呼び出すと、SVGでシーングラフが作成されます。

あと古いようですが、canvas-svgと逆のcanvg/canvgというのもあるようですね。
canvas-svg

This is a set of related components that make canvas and SVG play together more. Notably, it allows you to save a canvas 2D context as SVG, and to have an SVG mirror of a canvas context.
これは、canvasとSVGをより連携させる関連コンポーネントのセットです。 特に、キャンバスの2DコンテキストをSVGとして保存し、キャンバスコンテキストのSVGミラーを持つことができます。

canvg

JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders the result on Canvas.
Canvas上のJavaScript SVGパーサーおよびレンダラー。 SVGファイルのURLまたはSVGファイルのテキストを取得し、JavaScriptで解析して、結果をCanvasにレンダリングします。


ちなみにMDNにSVG教本があり、基本的な図形とかパスとか説明されています。
他に基本的な図形からパスへの変換は、以下の記事でIllustratorで出来るとか、そういうサービスのWebサイトがあるとかなので、頑張れば出来るか上記ライブラリの中に機能があるかするのでしょう。

How to convert a circle to a path?

For example, when I save an SVG from illustrator and view the code, I see a <circle> element, for example, but I'd like for it to be a <path> element, not a <circle> element.
How can I change it to be a path element?
たとえば、IllustratorからSVGを保存してコードを表示すると、たとえば<circle>要素が表示されますが、それを<circle>要素ではなく<path>要素にしたいと考えています。
どうすればパス要素に変更できますか?

One solution: In Illustrator, select your circle and choose Object > Compound Path > Make.
1つの解決策: Illustratorで円を選択し、[オブジェクト]> [複合パス]> [作成]を選択します。

以下はどこかに英語版の元記事がありそうですが。
svgのpolygon, polylineをpathに変換する方法

svgの線/塗り(stroke / fill)のアニメーションをしたい場合、パスにする必要があり、ポリゴン/ポリラインだとうまくいきません。polygon, polylineをpathに変換するには、以下サイトから行います。

Convert SVG Polygon to Path

HTMLにsvgタグをペーストして、下の空白の部分をクリックし、Chromeデベロッパーツールでsvgタグをコピーして使用します。

これらの記事とかも何か出来そうです。
Convert SVG polygon to path
svgのpolygonのpointsをpathのdとして扱う


それからPathの簡略化のような機能が必要では? と思ったので探してみたら、使えるかどうか不明ですがズバリの名前の物とか有りました。

mourner/simplify-js

Simplify.js is a high-performance JavaScript polyline simplification library by Vladimir Agafonkin, extracted from Leaflet.

Simplify.jsは、リーフレットから抽出された、Vladimir Agafonkinによる高性能JavaScriptポリライン簡略化ライブラリです。

類似なのかどうなのか、Paper.jsというのもあるようです。
Simplifying SVG path in javascript

Does anybody know a js library/algorithm for optimizing SVG path? I need to optimize paths only (reduce number of nodes). My path is autogenerated and is full of beziers, so simplify.js mentioned in a similar question won't fit. I'm also required to use browser, so node-backed modules won't fit too.

SVGパスを最適化するためのjsライブラリ/アルゴリズムを知っている人はいますか? パスのみを最適化する必要があります(ノードの数を減らします)。 私のパスは自動生成され、ベジェでいっぱいなので、同様の質問で言及されたsimplify.jsは適合しません。 また、ブラウザーを使用する必要があるので、ノード・ベースのモジュールも適合しません。

Finally used paperjs. Unfortunately they don't support modular builds yet.
最後にpaperjsを使用しました。 残念ながら、それらはまだモジュール式ビルドをサポートしていません。

Paper.js


なお「パターン適用」は逆に簡単かもしれません。
以下のような記事があり、適用したいパスで.getPointAtLength(n)するとポジションを取得出来るようです。

Implement Div objects on SVG path
Placing and rotating svg elements along a path with Snap.svg


ついでに日本語のまとめ記事もあるようです。
SVGを使うときに知っておくといいことをまとめました

1
  • Fabric.jsを利用することで、(仕組みは全く理解できていないのですが)SVG変換することが出来ました。Fabric.jsのことを今回初めて知ったのですが、検索してみたら割と有名なライブラリのようで言及しているページがたくさん見つかりました。単純化・パターン化については、提示いただいたリンク内容をこれから試していきたいと思います。
    – re9
    2020年6月27日 23:43

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。