はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

SVG

はてなブログでmermaidの図を描く

はてなブログでmermaidの図を描く Githubでもサポートされたmermaidをはてなブログでも描けないか試したところ多少なんとかなったのでメモ。 ```mermaid graph TB H["Hatenaで"] M["mermaid"] H-->M ``` 上のmarkdownコードがこうなる graph TB H["Hatenaで"…

Jupyter上にGraphvizの図をSVGで描画する

Jupyter上にGraphvizの図をSVGで描画する Jupyter上にGraphviz(.dot)の図をSVGで描画することに成功したのでメモとして残す。(※拡張機能としてはまだ作れていない) Viz.jsのおかげでJavaのインストールすら不要になった..! dotファイルのコードを書い…

How to create math SVG images by Mathjax-node(Node.js)

How to create math SVG images by Mathjax-node(Node.js) 数式をSVG画像化するメモ. How to create math SVG images by Mathjax-node(Node.js) 環境 Mathjax-nodeとは インストール 数式出力 SVGへ出力 環境 Wubdiws10 Node.js v6.10.3 npm 4.5.0

Atom にPlantUML を導入

Atom にPlantUML を導入 こちらで紹介されているRedmine でPlantUMLプラグインを導入してUML図を描くというのものをみて、ATOMでもプラグインで使えるようなのでメモ。 Redmine で技術仕様書を書こう | Aiming 開発者ブログ Atom にPlantUML を導入 環境 Pla…

CreateJS でハロウィン的なアニメーションつくってみた

CreateJS でハロウィン的なムービーつくってみた CreateJS でハロウィン的なムービーつくってみた アニメーション 感想 関連 アニメーション デ○モンが11月から劇場版?をやるとかでそれ関係のネタです。 github pages: haloween2015

CreateJS でSVG画像を扱う

CreateJS でSVG画像を扱う CreateJS でSVG を扱うときのメモ。 CreateJS でSVG画像を扱う CreateJSのバージョン CreateJSでSVGを描画 PreloadJSでSVGの読み込み 読み込み成功時のコールバック Bitmapインスタンスにして描画 Bimapインスタンスの生成 URI か…

SVGのpreserveAspectRaitoとCanvasのdrawImage

SVGのpreserveAspectRaitoとCanvasのdrawImage SVGの preserveAspectRatio と ブラウザによってCanvas のdrawImage の仕様が違ったのでメモ。 SVGのpreserveAspectRaitoとCanvasのdrawImage ブラウザ環境 SVG のpreserveAspectRatio preserveAspectRatioプロ…

SVG画像を canvgでCanvas に変換してみる

SVG画像を canvgでCanvas に変換してみる SVG画像を canvgでCanvas で扱えるように変換してみたのでメモ。 SVG画像を canvgでCanvas に変換してみる canvg とは 類似ツール Drawscript Toolkit for CreateJS ink2canvas サンプル 参考リンク canvg とは SVG…

SVG1.1 SVG 内部でJavaScirpt を動かす

SVG1.1 SVG 内部でJavaScirpt を動かす SVG では、内部にJavaSciript(JS) を書くことができます。 したがって、animate などよりも複雑なアニメーションなどを行うことができます(その分重くなると思いますが。。)。 SVG1.1 SVG 内部でJavaScirpt を動かす…

SVG1.1 で変形・アニメーション

SVG1.1 で変形・アニメーション SVG も、CSS3 で扱えるようなtransoform やanimate を使うことができます。 それらについて、まとめておきます。 SVG1.1 で変形・アニメーション 変形(transform) サンプル コード アニメーション animate サンプル コード an…

SVG1.1 グループ化について(g, symbol, defs)

SVG1.1 グループ化について(g, symbol, defs) 前回は、SVG で扱える基本図形の話でした。 今回は、SVG1.1 で使えるグループ化についてのメモです。 SVG の各図形は、パワポのグループ化のように、まとめて扱うことができます。 SVG1.1 グループ化について(g,…

SVG1.1 の基本図形のメモ

SVG1.1 の基本図形のメモ 昨今のレスポンシブ時代に見直されている SVG ファイルの基本的な図形描画を試したので、それについてのメモです。 SVG1.1 の基本図形のメモ 簡単な概要 対応環境 SVG ファイルの読み込み 基本図形 四角形(rect) サンプル コード 表…