Question

我喜欢KineticJS，它的速度，与GSAP的结合，但是让我头脑旋转的方法有一种方法可以像FabricJS那样自由地转换KineticJS对象吗？以下是我想说的链接参考：http://fabricjs.com/customization/ 我不想使用FabricJs它真的很慢，而且它的低性能可以从各种单元测试中看出来。

我真的很期待找到一种能够在KineticJS中自由变换物体的方法，因为它会让生活变得更加轻松。

有办法吗？

感谢您的帮助， Praney

Answer 1

就像markE所说，Eric {（KineticJS的创建者）教程网站上的这个tutorial是KineticJS中所有自由变换的基础。

我将详细介绍实际的自由变换逻辑，有两个主要功能：

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。默认情况下，它使用Kinetic.Circle但实际上您可以使用任何您想要的形状。

group - 要将锚添加到
x - 锚点的x位置
y - 锚点的y位置
name - 锚点的名称（通常描述锚点代表的位置，例如 topLeft 或 bottomRight

你会注意到一堆events附加到新创建的锚点上，其中大部分非常直接，但你要注意的是dragmove事件 - 这个事件是调用update函数的函数，它处理转换组/节点的所有逻辑。值得注意的是，为拖动锚点的每个像素调用update函数。

本教程使用4个角锚（因此为每个组/节点调用addAnchor 4次），但是如果你想要8个锚（4个角--4个边），那么你只需要调整逻辑以正确定位锚和在转换时正确移动锚点。

顺便说一句，我们将群组添加到群组的原因是因为我们需要它们与相关节点分组，并通过拖动和转换来坚持每个节点。

第二种方法是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函数只接受一个参数：activeAnchor这是被拖动的锚点。

之后，它会选择组中的其他锚点（使用您需要为每个节点提供的静态名称并在整个应用程序中保持一致），以便我们可以在拖动activeAnchor时转换其位置。

如果你使用8个锚点而不是4个，那么switch语句会变得非常大。这是因为你需要考虑在拖动其中一个锚点的同时翻译几乎所有其他锚点。

对于8锚示例：如果拖动topLeft锚点，则需要更新topRight锚点的 y 位置， x bottomLeft锚的位置，topMid和leftMid锚点，您需要调整 x，y 值以保持在另一个之间锚。

更新锚点位置后，该函数处理调整形状大小的逻辑。请注意，var image = group.get('.image')[0];选择了形状但是，您可以使用get函数按类型进行选择并执行以下操作：

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

显然，如果你只有每组 1个形状（转换）+4或8个锚点，这将最有效。

如果您有任何其他问题或意见，请与我们联系！祝你好运！

Answer 2

这个项目添加了一个转换工具（resize）和一些可以用作基础的漂亮处理程序： https://github.com/soloproyectos/jquery.transformtool

Answer 3

嗨，请看我之前的答案。只是搜索我的名字。希望它会成为你的出价帮助:) Transform (Move/Scale/Rotate) shapes with 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>

// ADD div元素，id = canvas，文件元素id = files和name files [] INSIDE THE BODY

能够自由转换像FabricJS这样的KineticJS对象

3 个答案: