moveable : 要素の回転・拡大が実装できるJavaScript

現在、バリウム胃透視の所見をマウスだけで絵を作成して書き込むことを想定しており、そのためには要素の回転が必要になります。

moveable というJavaScriptのライブラリを使えばできるのですが、導入方法が少しわかりにくくちょっと時間がかかりました。

私の環境は、


linux mint 21.2

です。

linux mint 21.2 では yarn も要らない
各ファイルの作成
localhost からアクセスする
scalable と resizable はバッティングする
xserver 上では動かない
xserver 上でも動きます

linux mint 21.2 では yarn も要らない

ネット上では、yarnなどを使って moveable をインストールするよう書いてありますが、moveable.min.js は単独でも動くようです。

linux mint 21.2 では yarn は要りません。
moveable のインストールも必要ありません。

ただし、moveable.min.css は必要です。

各ファイルの作成

Qiita のこのページをそのまま使わせて頂きました。

まずは、ディレクトリ作成して移動。


mkdir /var/www/html/features
cd /var/www/html/features

index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　<!-- cssを読み込む -->
  <link rel="stylesheet" href="style.css">
  <title>Features</title>
</head>
<body>
  <div id="title">
    <h1>Things you can do in Moveable</h1>
  </div>
  <div class="container">
    <div class="root"></div>
  </div> 
  <!--jsファイルを読み込む-->
  <script type="module" src="index.js "></script>
　　<!--moveableを読み込む-->
  <script src="moveable.min.js"></script>
</body>
</html>

style.css


.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  margin: 0;
}
#title {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-align: center;
}
.root {
  background-color: #DDD;
  width: 200px;
  height: 200px;
}

index.js


const move = new Moveable(document.body, {
  target: document.querySelector(".root"),
  draggable: true,
  resizable: true,
  keepRatio: true,
  rotatable: true
});
move.on("drag", ({ target, transform }) => {
  target.style.transform = transform;
});
move.on("resize", ({ target, width, height }) => {
  target.style.width = width + "px";
  target.style.height = height + "px";
});
move.on("rotate", ({ target, transform }) => {
  target.style.transform = transform
});

localhost からアクセスする

アドレスバーに「http://localhost/features/index.html」と入力すると動くようになります。

以下の動画はマウスクリックで閲覧できます。

scalable と resizable はバッティングする

scalable がどうしても使いたくて、index.js を以下のようにしたのですが scalable がどうしても動きません。

index.js


const move = new Moveable(document.body, {
  target: document.querySelector(".root"),
  draggable: true,
  resizable: true,
  rotatable: true,
  scalable:true,
});
move.on("drag", ({ target, transform }) => {
  target.style.transform = transform;
});
move.on("resize", ({ target, width, height }) => {
  target.style.width = width + "px";
  target.style.height = height + "px";
});
move.on("rotate", ({ target, transform }) => {
  target.style.transform = transform
});
move.on("scale", ({ target, transform }) => {
  target.style.transform = transform
});

何となく「resizable: false,」にしたら動きました。
scalable と resizable はバッティングするようです。バグかもしれません。

scalable を含めた動作状況はこんな感じです。