現在、バリウム胃透視の所見をマウスだけで絵を作成して書き込むことを想定しており、そのためには要素の回転が必要になります。
moveable というJavaScriptのライブラリを使えばできるのですが、導入方法が少しわかりにくくちょっと時間がかかりました。
私の環境は、
です。
linux mint 21.2 では yarn も要らない
ネット上では、yarnなどを使って moveable をインストールするよう書いてありますが、moveable.min.js は単独でも動くようです。
linux mint 21.2 では yarn は要りません。
moveable のインストールも必要ありません。
ただし、moveable.min.css は必要です。
各ファイルの作成
Qiita のこのページをそのまま使わせて頂きました。
まずは、ディレクトリ作成して移動。
index.html style.css index.jslocalhost からアクセスする
アドレスバーに「http://localhost/features/index.html」と入力すると動くようになります。
以下の動画はマウスクリックで閲覧できます。
scalable と resizable はバッティングする
scalable がどうしても使いたくて、index.js を以下のようにしたのですが scalable がどうしても動きません。
index.js何となく「resizable: false,」にしたら動きました。
scalable と resizable はバッティングするようです。バグかもしれません。
scalable を含めた動作状況はこんな感じです。
やりたかったのはこういうことです。
まだ、画像を透明にするとか、アンカーポイントや青い線を消すとか、合成した画像を1つにするとか、いろいろと課題はあります。
xserver 上では動かない
localhost で動くのですが、これを xserver に持っていくと動かなくなります。
でも、自宅の NAS 上では動きます。
いずれ、個人名をいれてローカルだけで動かすのでレンタルサーバー上で動かなくてもいいのですが、なぜ動かないのかわかりません。
xserver 上でも動きます
自分で書いていて「なんで?」と思っていました。
動かないはずはないからです。
ただ、jQueryは普通に動かない?
なので、JavaScript は body の下の方に書きました。