6

境界ボックスを構築し、ユーザーがキャンバス上で画像を拡大縮小、移動、回転できるようにする KineticJS の変換マネージャーを構築しようとしています。アンカー ポイントのロジックにつまずいてしまいました。

http://jsfiddle.net/mharrisn/whK2M/

私は、ユーザーがどのコーナーからでも画像を比例的にスケーリングし、アンカーポイントを押したままドラッグして回転できるようにしたいだけです。

誰かが私を正しい方向に向けるのを手伝ってくれますか?

ありがとうございました！

4

3 に答える 3

9

これが私が作成した回転制御の概念実証です：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
})
于 2013-02-22T22:59:15.143 に答える
0

私は同じことをしており、ほとんど同じ質問を投稿しましたが、サイズ変更と移動ツールを開発したリンクを見つけました。だから私は同じものを使いました。ただし、回転ツールは含まれていませんが、これはあなたにとっても良い出発点になる可能性があります。非常にシンプルで論理的です。リンクは次のとおりです。 http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

完璧に機能させることができれば、回転ツールも一緒に戻ってきます。

于 2013-11-26T10:12:43.790 に答える
0

私が作成したこのコード スニペットを投稿するのにまだ遅れていないことを願っています。この種の仕事を扱っている皆さんと同じ問題を抱えていました。画像やオブジェクトを扱う際に fabricjs フレームワークの機能を模倣するために非常に多くの回避策を試してから 3 日が経ちました。ただし、Fabricjs を使用することもできますが、Kineticjs の方が html5 を処理するのにより高速で一貫性があるようです。

幸いなことに、kineticjs と一緒に簡単に実装できる既存のプラグイン/ツールが既にあり、これが jQuery Transform ツールです。これの作者に感謝します！これをGoogleで検索してダウンロードするだけです。

私が作成した以下のコードが、この種の課題を解決するために頭を悩ませている多くの開発者に役立つことを願っています。

$(関数() {

    //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);

});
于 2014-02-06T08:15:03.110 に答える