1

私は KineticJS、その速度、GSAP との結婚が大好きですが、私の頭を混乱させているのは何ですか? FabricJS の方法のように、KineticJS オブジェクトを自由に変換する方法はありますか? 私が言おうとしていることへのリンク参照は次の とおりです。

KineticJS でオブジェクトを自由に変換できる方法を見つけることを本当に楽しみにしています。

それを行う方法はありますか？

助けてくれてありがとう、プラニー

4

3 に答える 3

6

markE が言ったように、Eric の (KineticJS の作成者) チュートリアル サイトのこのチュートリアルは、KineticJS 内のすべての自由な変換の基礎です。

実際の自由変換ロジックについて詳しく説明します。主な機能は 2 つあります。

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

  //Create the anchor shape
  var anchor = new Kinetic.Circle({
    x: x,
    y: y,
    stroke: '#666',
    fill: '#ddd',
    strokeWidth: 2,
    radius: 8,
    name: name,
    draggable: true,
    dragOnTop: false
  });

  //Calls the update function which handles the transform logic
  anchor.on('dragmove', function() {
    update(this);
    layer.draw();
  });
  //When the anchor is selected, we want to turn dragging off for the group
  //This is so that only the anchor is draggable, and we can transform instead of drag
  anchor.on('mousedown touchstart', function() {
    group.setDraggable(false);
    this.moveToTop();
  });
  //Turn back on draggable for the group
  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);
}

このaddAnchor関数は、名前が示すように、単一のアンカー (またはフリー トランスフォーム ハンドル) を に追加しKinetic.Groupます。デフォルトでは a を使用しKinetic.Circleますが、実際には任意の形状を使用できます。

  • group- アンカーを追加するグループ
  • x- アンカーの x 位置
  • y- アンカーの y 位置
  • name- アンカーの名前 (通常、 topLeftやbottomRightのように、アンカーが表す位置を記述します)

新しく作成されたアンカーに多数のアタッチされていることに気付くでしょう。eventsこれらのほとんどは非常に単純ですが、注目したいのはdragmoveイベントです。このイベントは、すべてのロジックを処理updateする関数を呼び出すイベントです。グループ/ノードを変換します。updateアンカーをドラッグしているピクセルごとに関数が呼び出されることに注意してください。

チュートリアルでは 4 つのコーナー アンカーを使用します (したがって、各グループ/ノードに対して addAnchor を 4 回呼び出します) が、8 つのアンカー (4 つのコーナー - 4 つの側面) が必要な場合は、ロジックを調整してアンカーを正しく配置し、アンカーを移動するだけです。変身時はちゃんと。

ちなみに、Anchors を Groupに追加する理由は、それらを問​​題のノードとグループ化し、ドラッグと変換によって各ノードに固執する必要があるためです。

2 番目の方法は次のupdate関数です。

function update(activeAnchor) {
  var group = activeAnchor.getParent();

  //Get each anchor inside the group, by name. Keep a standard set of names for every anchor you use and note they have to be names not ids because there will be multiple anchors named .topLeft in your app
  var topLeft = group.get('.topLeft')[0];
  var topRight = group.get('.topRight')[0];
  var bottomRight = group.get('.bottomRight')[0];
  var bottomLeft = group.get('.bottomLeft')[0];
  var image = group.get('.image')[0];

  var anchorX = activeAnchor.getX();
  var anchorY = activeAnchor.getY();

  // update anchor positions
  switch (activeAnchor.getName()) {
    case 'topLeft':
      //When topLeft is being dragged, topRight has to update in the Y-axis
      //And bottomLeft has to update in the X-axis
      topRight.setY(anchorY);
      bottomLeft.setX(anchorX);
      break;
    case 'topRight':
      topLeft.setY(anchorY);
      bottomRight.setX(anchorX);
      break;
    case 'bottomRight':
      bottomLeft.setY(anchorY);
      topRight.setX(anchorX); 
      break;
    case 'bottomLeft':
      bottomRight.setY(anchorY);
      topLeft.setX(anchorX); 
      break;
  }

  image.setPosition(topLeft.getPosition());

  //New height and width are calculated with a little math
  //by calculating the distance between the update anchor positions.
  var width = topRight.getX() - topLeft.getX();
  var height = bottomLeft.getY() - topLeft.getY();
  if(width && height) {
    image.setSize(width, height);
  }
}

このupdate関数は引数を 1 つだけ取ります。activeAnchorこれは、ドラッグされるアンカーです。

その後、グループ内の他のアンカーを選択し (各ノードに与え、アプリ全体で一貫性を保つために必要な静的な名前を使用)、activeAnchorがドラッグされている間にそれらの位置を変換できるようにします。

アンカーを 4 つではなく 8 つ使用すると、switch ステートメントがかなり大きくなる可能性があります。これは、アンカーの 1 つをドラッグするときに、他のほとんどすべてのアンカーを変換することを考慮する必要があるためです。

8 アンカーの例: アンカーをドラッグする場合、アンカーのy位置、アンカーのx位置をtopLeft更新する必要があります。他のアンカー。topRightbottomLefttopMidleftMid

アンカー位置を更新した後、関数はロジックを処理して形状のサイズを変更します。var image = group.get('.image')[0];ただし、できることは、get関数を使用してタイプで選択し、次のようにすることです。

var shape = group.get('Shape')[0];

グループごとに 1 つのシェイプ(変換するため) + 4 つまたは 8 つのアンカーがあれば、明らかにこれが最適に機能します。

他に質問やコメントがあればお知らせください。幸運を！

于 2013-09-13T14:05:15.547 に答える
0

こんにちは、これに関する私の以前の回答をご覧ください。私の名前を検索してください。それがあなたの入札の助けになることを願っています:) KineticJSで形状を変換（移動/拡大/縮小/回転）します

そこにhtmlタグを含めるのを忘れたので、ここにあります... :)``

<!-- INSIDE THE HEAD TAGS -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- I am using jquery transform tool for kineticjs -->
<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery.timer-1.0.3.js"></script>
<script type="text/javascript" src="../lib/kinetic-v4.7.4.min.js"></script>
<script type="text/javascript" src="../src/jquery.transformtool-1.0.2.js"></script>
<script type="text/javascript">
                 //PUT THE JAVSCRIPT SNIPPET HERE FROM THE LINK THAT I PROVIDED ABOVE
</script>

// id = canvas の div 要素と id = files の file 要素と name files[] を追加します。

于 2014-02-06T09:08:07.323 に答える
0

このプロジェクトは、変換ツール (サイズ変更) と、基礎として使用できるいくつかの優れたハンドラーを追加します: https://github.com/soloproyectos/jquery.transformtool

于 2014-02-04T11:54:36.540 に答える