使用KineticJS进行形状转换（移动/缩放/旋转）

Question

我正在尝试为KineticJS构建一个转换管理器，它将构建一个边界框，并允许用户在其画布上缩放、移动和旋转图像。我在锚点的逻辑上遇到了问题。

这是链接：http://jsfiddle.net/mharrisn/whK2M/ 我只想允许用户从任何角落按比例缩放他们的图像，并且在拖动锚点时进行旋转。

有人能帮忙指导一下吗？

谢谢！

- ChickensDontClap

---

如果您需要教程，请访问此处：http://www.html5canvastutorials.com/kineticjs/；当用户拖动锚点（每个角落上的蓝色正方形之一，我猜）时，您真的想旋转图像吗？看起来很混乱，也许您应该允许用户在变换/缩放/旋转上下文之间进行选择（您知道blender吗？）。 - fableal

看这个fiddle，你可以使用第五个锚点来控制旋转，其他四个锚点则控制缩放。 - SoluableNonagon

使用“dragstart”、“dragend”和“dragmove”进行旋转，可以通过获取鼠标位置的起始点和结束/当前点来计算旋转角度，从而得出图像中心的角度。这类似于将您的图片放入Microsoft Word或PowerPoint中。 - SoluableNonagon

你有更新过 Fiddle 吗？ - SoluableNonagon

Answer 1

这是我制作的一个旋转控件的概念证明： http://codepen.io/ArtemGr/pen/ociAD 当拖动该控件时，dragBoundFunc被用来沿着它旋转内容：

controlGroup.setDragBoundFunc (function (pos) {
  var groupPos = group.getPosition()
  var rotation = degrees (angle (groupPos.x, groupPos.y, pos.x, pos.y))
  status.setText ('x: ' + pos.x + '; y: ' + pos.y + '; rotation: ' + rotation); layer.draw()
  group.setRotationDeg (rotation); layer.draw()
  return pos
})

- ArtemGr

Answer 2

我正在做同样的事情，我已经发布了一个几乎相同的问题，但我找到了一个链接，其中你可以使用调整大小和移动工具。所以我也用了同样的方法。然而它不包含旋转工具，但这对你来说是一个很好的开始，非常简单和逻辑清晰。这是链接：http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

如果我成功地使其完美运行，我也会回来分享旋转工具。

- Ervin

Answer 3

我希望我还没有晚发这个我制作的代码片段。我和你们一样遇到了处理这种任务的问题。自从我尝试了许多解决方法来模拟fabricjs框架处理图像和对象的能力以来已经过去了3天。虽然我可以使用Fabricjs，但似乎Kineticjs更快/更一致地处理html5。

幸运的是，我们已经有现有的插件/工具，我们可以很容易地与kineticjs一起实现，这就是jQuery Transform工具。非常感谢作者！只需在Google上搜索并下载即可。

我希望我创建的下面的代码将帮助许多开发人员解决这种任务。

$(function() {

    //Declare components STAGE, LAYER and TEXT
    var _stage = null;
    var _layer = null;
    var simpleText = null;
    _stage = new Kinetic.Stage({
        container: 'canvas',
        width: 640,
        height: 480
    });
    _layer = new Kinetic.Layer();

    simpleText = new Kinetic.Text({
            x: 60,
            y: 55,
            text: 'Simple Text',
            fontSize: 30,
            fontFamily: 'Calbiri',
            draggable: false,
            name:'objectInCanvas',
            id:'objectCanvas',
            fill: 'green' 
          });
     //ADD LAYER AND TEXT ON STAGE     
    _layer.add(simpleText);
    _stage.add(_layer);
    _stage.draw();

    //Add onclick event listener to the Stage to remove and add transform tool to the object 
    _stage.on('click', function(evt) {

        //Remove all objects' transform tool inside the stage 
        removeTransformToolSelection(); 

        // get the shape that was clicked on
        ishape = evt.targetNode;

        //Add and show again the transform tool to the selected object and update the stage layer
        $(ishape).transformTool('show');
        ishape.getParent().moveToTop();
        _layer.draw();

    });

    function removeTransformToolSelection(){
        //Search all objects inside the stage or layer who has the name of "objectInCanvas" using jQuery iterator and hide the transform tool. 
        $.each(_stage.find('.objectInCanvas'), function( i, child ) {
                $(child).transformTool('hide');
        });
    }

    //Event listener/Callback when selecting image using file upload element
    function handleFileSelect(evt) {

           //Remove all objects' transform tool inside the stage 
           removeTransformToolSelection(); 

           //Create image object for selected file
           var imageObj = new Image();
           imageObj.onload = function() {
                    var myImage = new Kinetic.Image({
                    x: 0,
                    y: 0,
                    image: imageObj,
                    name:'objectInCanvas',
                    draggable:false,
                    id:'id_'
             });
             //Add to layer and add transform tool
             _layer.add(myImage);
             $(myImage).transformTool();
             _layer.draw();

            }  

          //Adding source to Image object.
          var f = document.getElementById('files').files[0];
          var name = f.name;
          var url = window.URL;
          var src = url.createObjectURL(f);
          imageObj.src = src;
    }
    //Attach event listener to FILE element
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

});

- Ryan Niño G. Dizon

---

哎呀，我忘记了 HTML 元素。<div id="canvas"></div> <input type="file" id="files" name="files[]" multiple /> - Ryan Niño G. Dizon

现有的插件是什么？ - Sahar Ch.