Konva.js で stage のドラッグ&ドロップ機能を追加したい

Question

現在このような、stageをズームインとズームアウトが出来るコードがあります。
https://jsfiddle.net/takeshi1234/us20aLhn/16/

実現したい内容は、ズームインした後にstage内でドラッグ&ドロップとした際に、ドラッグ&ドロップした分だけstage内の画像を動かしたいです。

また、画像より外側の領域にはいかないようにストップさせたいです。
（無限に動かせる訳ではなく、stage内に画像はとどめたい）

伝わりにくいかと思いますが、捕捉などもいたしますので、ご教授願います。
よろしくお願いします。

Answer 1

↓ここが参考になります。
HTML5 Canvas Simple Drag Bounds Tutorial | Konva - JavaScript 2d canvas library

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
        draggable: true,
        dragBoundFunc: function(pos) {
          var scale = stage.scaleX();
          return {
            x: Math.max( Math.min( pos.x, 0 ), width * ( 1 - scale ) ),
            y: Math.max( Math.min( pos.y, 0 ), height * ( 1 - scale ) ),
          };
        },
      });

サンプル

Comments

[退会済みユーザー]

ありがとうございます！

また質問で申し訳ないのですが、stageの大きさを固定ではなく可変にしたいです。（レスポンシブ）
こちらを参考にしたのですが、うまく実装することができず、、、
https://konvajs.org/docs/sandbox/Responsive_Canvas.html

イメージだとstageがcontainerの大きさによって大きくなったり小さくなったりしますが、そこに乗っているレイヤーは相対的に大きくなったり小さくなったりするイメージです。

自分で実装した際はstageの大きさは変わりますが、ドラッグ＆ドロップをした時にとんでもないところに一瞬飛んで固まってしまいました。

ズームインとズームアウトのほうは、
fitStageIntoParentContainer() の中の containerWidth / stage.getWidth() でとっているscaleをフィールドで保持して、
教えて頂いたズームのところの実装を
newScale = Math.max(newScale, 保持したScale);
newPos.x = Math.max(newPos.x, width * (保持したScale - newScale));
newPos.y = Math.max(newPos.y, height * (保持したScale - newScale));
に変えたところ正常に動きました。

ただ、ドラッグアンドドロップのほうはどうしても自力で解決できず、、、

よろしくお願いします。

[Lhankor_Mhy]

このサンプル、スマホとかの縦長画面になると、下にstage外の領域ができてしまいますので、そのままでは使えないですね……

[退会済みユーザー]

なるほど、、、

やりたい事の本質としてはレスポンシブというより
fitStageIntoParentContainer()の処理を利用して、(5000 * 5000) や (3000 * 3000) などの大きさの異なる正方形の画像を、同じ大きさで表示させたくて。
var containerWidth = 800;//表示させたいstageの大きさ
var scale = containerWidth / imageSize;//画像の一辺の長さ
stage.width(stageWidth * scale);
stage.height(stageHeight * scale);
stage.scale({ x: scale, y: scale });
stage.draw();

ってやるとどの画像を入れても同じ大きさになってくれるので、実装してみたのですが、、、
ズームのほうはうまく動かせたのですが、、、

[退会済みユーザー]

このやり方以外にも方法はないでしょうか、、
ズームとドラッグアンドドロップを機能させたまま、、、

[Lhankor_Mhy]

えええ、そんな今更。
もう、レスポンシブのコード書いてしまいましたが……
質問の目的というか、希望する動作はきちんとFIXしておいてほしいのですが。

[Lhankor_Mhy]

https://jsfiddle.net/Lhankor_Mhy/pvwr8b2g/3/

[Lhankor_Mhy]

あとはもう自分でやってほしい……

[退会済みユーザー]

ありがとうございます、、、帰宅したら実装してみます、、、ほんと助かります、、、

[退会済みユーザー]

ダメでした、色々試してみたのですが自力で解決出来なそうです。

[退会済みユーザー]

解決しましたありがとうございました

[Lhankor_Mhy]

ご解決されて何よりです