0

私は自分のニーズに合わせて見つけて微調整したKineticJSでサイズ変更を使用しています( http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images / )

これらのニーズの 1 つは、ユーザーが画像の位置を特定の X および Y 位置にリセットし、画像を drawingBox (スクリプトによって定義されます。保存時にカットアウト)。でも; 左上隅の画像のサイズを変更すると、X と Y が負の数になります。したがって、ユーザーがイメージを 0, 0 にリセットできるようにしたい場合は、0, 0 としましょう。topLeft アンカーでサイズを変更した後、0, 0 の行はオフになります。

別の方法で 0, 0 ラインにトレーニングする方法はありますか? それとも、画像が含まれているグループまたはレイヤーをベースラインとして使用しますか?

ステージの初期化 (ドローボックスに一致するように境界線の周りに 4 つの長方形を描画します。保存時に画像の切り抜きとなる中央/中央のボックスを除いて、すべてがオーバーレイされます。

function initStage(image) {
    stage = new Kinetic.Stage({
        container: 'container',
        width: workspaceWidth,
        height: workspaceHeight
    });



    //Get the top, bottom, left and right square sized. used for X/y positioning and the creation of the ovelray
    var top_bottom_sides = (workspaceHeight-drawboxHeight)/2;
    var left_right_sides = (workspaceWidth-drawboxWidth)/2;

    imageGroupX = left_right_sides;
    imageGroupY = Math.ceil(top_bottom_sides);
    imgGroup = new Kinetic.Group({
        /*x: (workspaceWidth/2)-(image.width/2),
        y: (workspaceHeight/2)-(image.height/2),*/
        x: imageGroupX,
        y: imageGroupY,
        draggable: true,
        dragOnTop: false
    })

    layer = new Kinetic.Layer();
    //add the imgGroup to the layer and the layer to the stage.
    imageImg = new Kinetic.Image({
        /*x: left_right_sides-imgGroup.getX(),
        y: Math.ceil(top_bottom_sides)-imgGroup.getY(),*/
        x: 0,
        y: 0,
        image: image,
        width: image.width,
        height: image.height,
        name: 'image',
    });



    imgGroup.add(imageImg);
    layer.add(imgGroup);

    addAnchor(imgGroup, 0, 0, 'topLeft');
    addAnchor(imgGroup, image.width, 0, 'topRight');
    addAnchor(imgGroup, image.width, image.height, 'bottomRight');
    addAnchor(imgGroup, 0, image.height, 'bottomLeft');

    //Create 4 rectangles and place them around the borders to create an overlay which matches the drawing box
    //Ceil the height to avoid 0.5 pixel overlap on some dimensions
    rect1 = new Kinetic.Rect({  //top
        x: 0,
        y: 0, 
        width: workspaceWidth,
        height: Math.ceil(top_bottom_sides),
        fill: '#000000',
        opacity: 1,
        listening: false
    });

    //Floor the height to not have a 0.5 pixel overlap on some dimensions
    rect2 = new Kinetic.Rect({   // bottom
        x: 0,
        y: Math.ceil(workspaceHeight-top_bottom_sides), 
        width: workspaceWidth,
        height: Math.floor(top_bottom_sides),
        fill: '#000000',
        opacity: 1,
        listening: false
    });

    rect3 = new Kinetic.Rect({ //right
        x: rect1.getWidth()-left_right_sides,
        y: rect1.getX()+rect1.getHeight(), 
        width: left_right_sides,
        height: drawboxHeight,
        fill: '#000000',
        opacity: 1,
        listening: false
    });

    rect4 = new Kinetic.Rect({  //left
        x: rect1.getX(),
        y: rect1.getX()+rect1.getHeight(), 
        width: left_right_sides,
        height: drawboxHeight,
        fill: '#000000',
        opacity: 1,
        listening: false
    });


    layer.add(rect1);
    layer.add(rect2);
    layer.add(rect3);
    layer.add(rect4);

    layer.on('mouseover', function() {
        rect1.setOpacity(0.5);
        rect2.setOpacity(0.5);
        rect3.setOpacity(0.5);
        rect4.setOpacity(0.5);
        layer.draw();
    });

    layer.on('mouseout', function() {
        rect1.setOpacity(1);
        rect2.setOpacity(1);
        rect3.setOpacity(1);
        rect4.setOpacity(1);
        layer.draw();
    });

    stage.add(layer);

    stage.draw();
    fitImage();
}

アンカードラッグのサイズ変更を行う私の更新：

function update(activeAnchor, optionalX, optionalY) {
    //var group = activeAnchor.getParent();
    var group = imgGroup;
    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];
    if (optionalX && optionalY) {
        var anchorX = optionalX;
        var anchorY = optionalY;
    } else {
        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();
    }


    var activeHandleName = activeAnchor.getName();
    // update anchor positions
    switch (activeHandleName) {
        case 'topLeft':
            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;
    }

    if (jQuery('#keep_ratio:checked').val() != undefined) {
        // Calculate new dimensions. Height is simply the dy of the handles.
        // Width is increased/decreased by a factor of how much the height changed.
        newHeight = bottomLeft.getY() - topLeft.getY();
        newWidth = image.getWidth() * newHeight / image.getHeight();

        // Move the image to adjust for the new dimensions.
        // The position calculation changes depending on where it is anchored.
        // ie. When dragging on the right, it is anchored to the top left,
        //     when dragging on the left, it is anchored to the top right.
        if(activeHandleName === "topRight" || activeHandleName === "bottomRight") {
            image.setPosition(topLeft.getX(), topLeft.getY());
        } else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") {
            image.setPosition(topRight.getX() - newWidth, topRight.getY());
        }

    } else {
        var newWidth = topRight.getX() - topLeft.getX();
        var newHeight = bottomLeft.getY() - topLeft.getY();
        if(activeHandleName === "topRight" || activeHandleName === "bottomRight") {
            image.setPosition(topLeft.getX(), topLeft.getY());
        } else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") {
            image.setPosition(topRight.getX() - newWidth, topRight.getY());
        }

    }

    imageX = image.getX();
    imageY = image.getY();


    // Update handle positions to reflect new image dimensions
    topLeft.setPosition(imageX, imageY);
    topRight.setPosition(imageX + newWidth, imageY);
    bottomRight.setPosition(imageX + newWidth, imageY + newHeight);
    bottomLeft.setPosition(imageX, imageY + newHeight);

    var width = newWidth;
    var height = newHeight;

    if(width && height) {
        width = Math.round(width);
        height = Math.round(height);

        image.setSize(width, height);
    }
}

fitImage 関数と setSizeManually:

function fitImage() {
if (imageImg) {
    var widthDifference = (imageImg.getWidth() > drawboxWidth) ? imageImg.getWidth()-drawboxWidth : drawboxWidth-imageImg.getWidth();
    var heightDifference = (imageImg.getHeight() > drawboxHeight) ? imageImg.getHeight()-drawboxHeight : drawboxHeight-imageImg.getHeight();

    var ratio = imageImg.getWidth()/imageImg.getHeight();

    if (widthDifference > heightDifference) {
        //Fit the image horizontally and scale it vertically
        var newHeight = Math.ceil(drawboxWidth / ratio);
        var newWidth = drawboxWidth+1;
    } else {
        //Fit the image vertically and scale it horizontally
        var newWidth = Math.round(drawboxHeight * ratio);
        var newHeight = drawboxHeight+1;
    }

    imageImg.setWidth(newWidth);
    imageImg.setHeight(newHeight);
    setSizeManually(newWidth, newHeight);
}
}

function setSizeManually(width, height, isSlider) {
    var stage = imgGroup.getStage();
    update(imgGroup.get('.bottomRight')[0], width, height, isSlider);
    stage.draw();
}
4

1 に答える 1

1

あなたが何をしたいのか完全にはわかりませんが、次のようになります。

オブジェクトをある位置に移動したい場合は、次のようにします。

 object.setPosition(0,0);

あなたの場合、あなたの画像はグループに含まれているので、このようなアプローチをとります（メモ付き）

 function resetImage(imageGroup, resetToX, resetToY){ // give the group and the x,y you want it moved to
     var groupChildren = imageGroup.getChildren(); // get image and anchors
     // in your code, the first item added is an image, then four anchor points, from top left clockwise
     var currentImageWidth = groupChildren[0].getWidth(); // will need this to calculate anchor points position
     var currentImageHeight = groupChildren[0].getHeight(); // same as above
     groupChildren[0].setPosition(resetToX, resetToY); // reset the image to this position, you could also do .setAbsolutePosition(resetToX, resetToY);
     groupChildren[1].setPosition(resetToX, resetToY); //reset topLeft anchor
     groupChildren[2].setPosition(resetToX+currentImageWidth, resetToY); //reset topRight anchor
     groupChildren[3].setPosition(resetToX+currentImageWidth, resetToY+currentImageHeight); // reset bottomRight anchor
     groupChildren[4].setPosition(resetToX, resetToY+currentImageHeight); // reset bottomLeft anchor
     imageGroup.getLayer().draw(); //redraw layer once everything resets
 }
于 2013-03-13T15:34:27.307 に答える