touyou/rvg-editor

Responsive Variable Size Graphics Editor

RVG Editor

RVG (Responsive Variable size Graphics) Editor

How to use rvg files

First, you must download rvg-loader.js and worker_pako.js (in public/js folder.)

Next, you should load rvg-loader.js like this.

<script src="rvg-loader.js"></script>

Then you can use r-img tag.

<r-img src="eagle-small.rvg"></r-img>

This tag do not support normal image format.

And you should also set responsive width and height to r-img tag and their parent elements. (display: block is needed.)

body,
html {
  width: 100vw;
  height: 100vh;
}

r-img {
  display: block;
  width: 50%;
  height: 50%;
}

So some code is still needed, but all you need is this. Yes, that's all.

Publication

• レスポンシブWebデザインのための画像形式及び制作用インターフェース(WISS2019ロングティザー) 発表 PDF

LICENCE

MIT

rvg-editor's Issues

画像の読み込みと保存機能を入れる

• 読み込み
• 書き込み

プレビューへのレンダリング

プレビューにリストのデータから計算したものを表示

Preview画面にテンプレートサイズボタンを追加しておく

• 固定領域の用意
• ボタンの追加

リリース用のREADME作成

オープンソース化を目指す際

プレビューにデバイスの外枠などつける

最終的な使い方やサイズ感がよくわかりません。
理想的には、いろいろな画面サイズのデバイスで表示することを
考えているのかと思います。プレビューで、デバイスの外枠と手なども
一緒に表示すると、サイズ感が伝わるように思います。

from #10

補完を入れる

• 補完クラスを入れる
• 従来のものも用意？（ポイント追加のフローが違うので検討）
• Preview画面を作る

キャンバス系のmob-x化

キャンバスのデータをmob-xで管理できるようにする

ユーザースタディ2

• アイコンがわかりにくい
• 画面の説明が動画だとわかりにくい
• 重いから不要な部分は見えなくていい
• seamをいじるとき重い
• 文字編集での反映がうまくいってない？
• 自分がなにをしているのかわからなくなる時がある

エディタ画面の構造の改修

スクロールとかできるようにしてナビゲーターもつける

左上隅が小さく、右下隅が大きい
左右が幅で、上下が高さの大きさ順になるように

• デフォルト画像の配置とそれをもとにした画像の分布
• キーフレームの要領で考えたい、最終的にはそのキーフレームもしっかり描画し調整できるようにするなど

SeamCarvingアルゴリズムの修正

• 縦横対応、およびjson形式に合わせた削除順の整備・高速化

ユーザーインタビュー用のアンケートをつくる

ユーザーインタビュー用にアンケートをつくる。
直接聞く場合もあるけど、テキストベースで集めることによって少し効率化も図る

• Googleのアンケートと結果用スプレッドシートの準備
• どういうことを聞くか？
• 作成したものをデモとして動かせるようなページも欲しいかも？

キーフレーム的な考え方のモードと独立編集のモードの切り替えができたら

現状は、「全部のサイズをまとめて、共通のパラメータで定義する（操作の順序に結果が依存しない）」
ようなインタフェースになっているかと思います。
別のやり方として、「個別のサイズごとに、独立に、photoshop　を使っているかのように比較的自由に編集する（操作の順序に結果が依存する）」、そのあとで、計算機が補完の方法を考える、というのもありかと思います。
個人的には後者の方が、アーティストにはやりやすいかと思いますが
どうでしょうか

from #10

ユーザースタディ3

• splitのサイズを変えられるか？
• アスペクト比を変えたくない場所を指定したい
• templateとして各解像度のピクセルもあるといい
• 画面が画像でうまってしまうのが△

キーポイントを追加する機能をつける

• 単純に追加する機能
• デバイスサイズテンプレートの用意
• 自由入力？

MultiResizer.jsの制作（アルゴリズム変更以外の部分）

アルゴリズムはノートに記載

• 専用タグを画面サイズに合わせて大きさを変えるキャンバスに設定（ https://web-designer.cman.jp/javascript_ref/window/size/ ）
• msiファイルの読み込み、jsonの展開
• jsonと画像情報を受け取ったResizerクラスを用意、画面サイズ変更に合わせてそれを動かす（ http://analogic.jp/window-resize-complete/ ）

レイヤー分け機能の追加

レイヤーを分けることによって、retargeting的な側面を増やす

アルゴリズムとしてはセグメンテーション分けのようなものをサポートとして動かすとよさそう
http://people.inf.ethz.ch/aksoyy/sss/

ユーザースタディ１

• seamとscalingの違いがわかりにくい
  • 用語を記号に落とし込んでほしい
• key frameの削除後の扱いがわかりにくい
• Previewや移動機能の動線が足りず、気付かない
  • 移動の時はカーソルを従事にする
• initial seamに関しても説明がさらに必要
• Previewがなにをやっているのか不明瞭
• Previewで複数サイズを比較してみたい
• 一旦見なくていいKey Frameを隠す機能が欲しい
• スライドバーだけでなく直接文字入力でも調整したい
• モードの選択状態が見えるようにしてほしい
• Save Imageという言葉が不適切に思える
• Key Frameを減らしたときのほうが考えやすい→同時に複数が変化するのでやはり負担？
• 切り抜きがもう少し直感的にできるといいかもしれない
• 戻す機能が欲しい
• 画像の選択をドラッグ＆ドロップでもできるようにしてほしい
• 移動とスライドバーがコンフリクトする場合がある？
• 共同編集機能が欲しい
• Shiftを押しながら等比率で変形できる機能（Preview）が欲しい
• 補間のイメージを明確にできるとよい？→動線設計がもう少し必要
• 編集結果を実際のWeb上でも動かしながら使ってみたい
• どの写真が変化するかのハイライトが欲しい

どこが重要かのマスク機能＋space deformation?

現状どのような操作がサポートされているのか教えてください。以下のようなものでしょうか？

crop
uniform scaling
seam curving (どこが重要かのマスクを自由に設定できる？)
space (grid) deformation (どこが重要かのマスクを自由に設定できる？)

from #10

先生からのフィードバック

最終的な使い方やサイズ感がよくわかりません。
理想的には、いろいろな画面サイズのデバイスで表示することを
考えているのかと思います。プレビューで、デバイスの外枠と手なども
一緒に表示すると、サイズ感が伝わるように思います。

---

現状は、「全部のサイズをまとめて、共通のパラメータで定義する（操作の順序に結果が依存しない）」
ようなインタフェースになっているかと思います。
別のやり方として、「個別のサイズごとに、独立に、photoshop　を使っているかのように比較的自由に編集する（操作の順序に結果が依存する）」、そのあとで、計算機が補完の方法を考える、というのもありかと思います。
個人的には後者の方が、アーティストにはやりやすいかと思いますが
どうでしょうか

---

現状どのような操作がサポートされているのか教えてください。以下のようなものでしょうか？

• crop
• uniform scaling
• seam curving (どこが重要かのマスクを自由に設定できる？)
• space (grid) deformation (どこが重要かのマスクを自由に設定できる？)

---

例として、人のポートレートもいれるとよいと思います。
顔だけ-> 首元まで -> 胸元まで

navigator に拡大機能を入れる

• モード変更機能の追加
• モードが変わったときにグリッド表示を採用

補完方法の変更

編集のリアルタイム反映

• ステート管理の方法を変えることで編集をリアルタイムに反映する

Key Frameで数字入力欄が消える場合がある

再現条件は今の所不明