electronでsvg.jsを使用する場合、公式サイトからsvg.jsファイルを直接落としてきてもよいのですが、バージョンを管理したい都合もあり、幸いにもnpmで提供されているので、npmから導入して使用することにします。
electronとsvg.jsをインストールします。
`npm install electron`
`npm install svg.js`
起動する状態のelectronアプリケーションを作ってから、下記のような内容を追記します。
``` : ./js/index.js
'use strict';
var SVG = require('svg.js');
window.onload = function(e){
var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
}
```
``` : index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>daisy sequence - UML sequence diagram editor -</title>
<script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
hello!
<div id="drawing"></div>
</body>
</html>
```
svg.jsは、`var SVG = require('svg.js');`でロードできます。
注意する点として、onloadの前にsvg.js機能を呼びだそうとすると、
`Uncaught TypeError: Cannot read property 'nodeName' of null`
というエラーに見舞われます。
登録:
コメントの投稿 (Atom)
Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換する
Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換することができるが、上手く変換されない場合がある。 以前作った魔法陣イラスト素材をイラスト素材ストックサイトへ登録しようと思い立ち、改めて素材用にラスタライズ変換をかけようとした。 ラスタライズ変換...

-
ノートPCの液晶保護フィルムが100円で買えるなんて、良い時代になりました。 ダイソーに行ったら、ノートPCで使えそうな液晶保護フィルムがあったため、衝動的に購入。 A4サイズと書いてあります。私が使っている13インチワイドのノートPCで使えるかどうかわからなかっ...
-
RENAULT LIGHT10 購入した際に一緒に揃えたものです。 自転車を使うにあたって、自転車以外にもいろいろ必要なあるものがあります。 これまで自宅に自転車はなかったので、必要なものは全部、1からそろえました。 ヘルメット、ライト、ベル、空気入れ、鍵x2、輪行バッグ...
-
Make オルタネイティヴは数あれど、小さな実験プロジェクトを始めるときに、簡単に使えるMakeは未だにビルドツールとして有力な選択肢だと思います。 MakefileはUNIX環境、というかCLIツール群があることを前提にしているところがあります。Windows環境ではUN...
0 件のコメント:
コメントを投稿