1

ここ数日、kineticjs とキャンバスで遊んでいます。サイズ変更可能な画像をロードするドラッグ アンド ドロップ キャンバスがあります。サイズ変更可能な画像のアンカーは円です。

var anchor;

  function addAnchor(group, x, y, name) {
    var stage = group.getStage();
    var layer = group.getLayer();

    anchor = new Kinetic.Circle({
      x: x,
      y: y,
      stroke: "#666",
      fill: "#ddd",
      strokeWidth: 2,
      radius: 8,
      name: name,
      draggable: true
            });                   


    anchor.on("dragmove", function() {
      update(group, this);
      layer.draw();
    });
    anchor.on("mousedown touchstart", function() {
      group.setDraggable(false);
      this.moveToTop();
    });
    anchor.on("dragend", function() {
      group.setDraggable(true);
      layer.draw();
    });
    // add hover styling
    anchor.on("mouseover", function() {
      var layer = this.getLayer();
      document.body.style.cursor = "pointer";
      this.setStrokeWidth(4);
      layer.draw();
    });
    anchor.on("mouseout", function() {
      var layer = this.getLayer();
      document.body.style.cursor = "default";
      this.setStrokeWidth(2);
      layer.draw();
    });

    group.add(anchor);


  }

それらを矢印に変えたり、画像のサイズが変更可能であることをユーザーに示すようなものにしたいと思います。誰かがこれを行う方法や、矢印を描く方法やアンカーを画像に置き換える方法を教えてくれるチュートリアルを持っていますか?

助けてくれてありがとう...

4

1 に答える 1

3

新しい Kinetic.Cirle とそのプロパティを次のように変更する必要があると思います。

var anchor = new Kinetic.RegularPolygon({
      x: x,
      y: y,
      sides: 3,
      rotation: -190,
      radius: 8,
      stroke: "black",
      strokeWidth: 2,
      name: name,
      draggable: true
    });

これはほんの始まりにすぎませんが、各アンカーの回転が異なるため、各三角形が正しい方向を向くように、アンカーのグループにさらに変数を追加する必要があります。

これを簡単にテストしただけですが、出発点として役立つことを願っています。

Docsを再確認することを忘れないでください。

編集: hereも参照してください。

于 2012-07-30T21:07:33.757 に答える