Hatena::ブログ(Diary)

_development, RSSフィード

2013-09-14

enchantMOONのストロークを背景画像にするシールをつくった


概要

enchantMOONのページのストロークを背景画像に設定するシールを作りました。

background.moon.zip


使い方

シールを実行すると現在のページのストロークを、そのページの背景に設定します。オリジナルのストロークは削除しないので、オリジナルのストロークが不要な場合は消しゴムなどで消してください。

なお、背景に設定される画像はオリジナルのレンダリングよりも劣化するのご注意ください。これはシールで使っているラスタライザ(enchantMOONのストロークをラスタライズするライブラリをつくった)の品質の問題です。


使いみち

罫線シールなどで背景のように振る舞うストローク引いてしまうと、ノート検索にヒットしなくなるようなので、そういう場合にシールで引いた罫線を背景画像化するなどの用途に使うとよいと思われます。

しかし、そのような場合はそもそも罫線をひいた背景画像を設定するような罫線シールをつくったほうがよいかもしれません...

うーん。


解説

ストロークJSONレンダリングしたcanvas引数にして、MOON.saveImage(string, HTMLCanvasElement)を呼び出して画像を生成・保存しています。

var page = MOON.getCurrentPage(),
    bg = "background.png"
    w = 768,
    h = 1024,
    canvas = ...

MOON.saveImage(page.backing + "/" + bg, canvas);
backing["transparent"] = true;
backing["image"] = bg;
backing["clip"] = {"width":1.0,"color":0,"type":"pen","data":[0.0,0.0,1.0, w,0.0,1.0, w,h,1.0, 0.0,h,1.0]};
MOON.setPaperJSON(page.backing, backing);

GitHubリポジトリ


参考