2

KineticJSライブラリを使用して画像のサイズ変更にサイズ制限を追加しようとしています。HTML5 Canvasチュートリアルでは、画像のサイズを変更する方法を提供してい ます。http ://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

しかし、ユーザーが画像のサイズを50pxx50px未満または200x200を超えないようにしたいと思います。次のコードを使用して、コントロールを管理する方法をたくさん試しました。しかし、それは非常に奇妙な結果を示しています

    dragBoundFunc: function(pos) {

        var newX = '';
        var image_width = group.get(".darthVaderImg")[0].getWidth();
        var image_height = group.get(".darthVaderImg")[0].getHeight();
        var image_position = group.get(".darthVaderImg")[0].getPosition();

                if((image_width>50 && image_width< 200)     ){
                    newX = pos.x;   
                }else{
                    newX = image_position.x+image_width+80; 
                }
                if((image_height>50 && image_height< 200)       ){
                    newY = pos.y;   
                }else{
                    newY = image_position.y+100; 
                }

                  return {
                    x: newX ,
                    y: newY,
                   };

                }

私がそれをどのように行うことができるかという例やアイデア

4

1 に答える 1

2

http://jsfiddle.net/e4uyG/4/は、あなたが求めているものにかなり近づきます。

基本的に、画像を再描画するupdate（）関数があるので、一定のサイズ変更に制限するだけです

  function update(group, activeAnchor) {
    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];

    // update anchor positions
    switch (activeAnchor.getName()) {
      case "topLeft":
        topRight.attrs.y = activeAnchor.attrs.y;
        bottomLeft.attrs.x = activeAnchor.attrs.x;
        break;
      case "topRight":
        topLeft.attrs.y = activeAnchor.attrs.y;
        bottomRight.attrs.x = activeAnchor.attrs.x;
        break;
      case "bottomRight":
        bottomLeft.attrs.y = activeAnchor.attrs.y;
        topRight.attrs.x = activeAnchor.attrs.x;
        break;
      case "bottomLeft":
        bottomRight.attrs.y = activeAnchor.attrs.y;
        topLeft.attrs.x = activeAnchor.attrs.x;
        break;
    }

    image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

    var width = topRight.attrs.x - topLeft.attrs.x;
    var height = bottomLeft.attrs.y - topLeft.attrs.y;
    if(height > 50 && height < 200) // Limit the height 
      image.setHeight(height);

    if(width > 50 && width < 200)  // Limit the width
      image.setWidth(width);
  }
于 2013-01-21T15:15:29.470 に答える