kineticjs在点击时显示图像锚点

Question

我有一个带有图像上传和文本输入的kineticjs画布，两个功能都运行正常，但是我无法获得图像调整大小的锚点来显示...我需要让图像调整大小的锚点来显示＆＃34 ;的onClick＆＃34;图像。

任何帮助非常感谢:) 提前谢谢。

这是js

var stage = new Kinetic.Stage({
    container: 'container',
    width: 375,
    height: 200
});

var layer = new Kinetic.Layer();

//image loader
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            layer.add(new Kinetic.Image({
                x: 100,
                y: 50,
                image: img,
                width: 200,
                height: 130,
                draggable: true
            }));
            text.moveToTop();
            stage.draw();
        };
        console.log(event);
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);     
}

// parameters
var resizerRadius = 3;
var rr = resizerRadius * resizerRadius;

// constant
var pi2 = Math.PI * 2;

function draw(img, withAnchors, withBorders) {
    // clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // draw the image
    var view = img.view;
    ctx.drawImage(img, 0, 0, img.width, img.height, view.left, view.top, view.width, view.height);

    // optionally draw the draggable anchors
    if (withAnchors) {
        drawDragAnchor(view.left, view.top);
        drawDragAnchor(view.left + view.width, view.top);
        drawDragAnchor(view.left + view.width, view.top + view.height);
        drawDragAnchor(view.left, view.top + view.height);
    }

    // optionally draw the connecting anchor lines
    if (withBorders) {
        ctx.beginPath();
        ctx.rect(view.left, view.top, view.width, view.height);
        ctx.stroke();
    }
    drawText();
}

function drawDragAnchor(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, resizerRadius, 0, pi2, false);
    ctx.closePath();
    ctx.fill();
}

function drawText(){
    var x = 40,
        y = 100;
    ctx.font = "bold 20px sans-serif";
    ctx.fillStyle = "black";
    ctx.fillText($("#textBox").val(), x, y);
}

// -------------------------------------------
//        -        Hit Testing        -
// -------------------------------------------

// return 0,1,2, or 3 if (x,y) hits the respective anchor
//   of the given view.
// return -1 if no anchor hit.
function anchorHitTest(view, x, y) {
    var dx, dy;
    x -= view.left;
    y -= view.top;
    // top-left
    dx = x;
    dy = y;
    if (dx * dx + dy * dy <= rr) return (0);
    // top-right
    dx = x - view.width;
    dy = y;
    if (dx * dx + dy * dy <= rr) return (1);
    // bottom-right
    dx = x - view.width;
    dy = y - view.height;
    if (dx * dx + dy * dy <= rr) return (2);
    // bottom-left
    dx = x;
    dy = y - view.height;
    if (dx * dx + dy * dy <= rr) return (3);
    return (-1);
}

// return true if (x,y) lies within the view
function hitImage(view, x, y) {
    x -= view.left;
    y -= view.top;
    return (x > 0 && x < view.width && y > 0 && y < view.height);
}

// -------------------------------------------
//        -        Mouse        -
// -------------------------------------------

var mousePos = {
    x: 0,
    y: 0
};
var draggingImage = false;
var startX, startY;
var isDown = false;

var currentImg = null;

var draggingResizer;

function updateMousePos(e) {
    var canvasOffset = $("#canvas").offset();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;
    updateMousePos = function (e) {
        mousePos.x = parseInt(e.clientX - offsetX);
        mousePos.y = parseInt(e.clientY - offsetY);
    };
    return updateMousePos(e);
}


function handleMouseDown(e) {
    updateMousePos(e);
    // here you could make a loop to see which image / anchor was clicked
    draggingResizer = anchorHitTest(img.view, mousePos.x, mousePos.y);
    draggingImage = draggingResizer < 0 && hitImage(img.view, mousePos.x, mousePos.y);
    // 
    if (draggingResizer<0 && !draggingImage) return;
    startX = mousePos.x;
    startY = mousePos.y;
    currentImg = img;
}

function handleMouseUp(e) {
    if (!currentImg) return;
    draggingResizer = -1;
    draggingImage = false;
    draw(currentImg, true, false);
    currentImg = null;
}

function handleMouseOut(e) {
    handleMouseUp(e);
}

function handleMouseMove(e) {
    if (!currentImg) return;
    updateMousePos(e);

    var view = currentImg.view;
    if (draggingResizer > -1) {
        var oldView = {
            left: view.left,
            top: view.top,
            width: view.width,
            height: view.height
        };
        // resize the image
        switch (draggingResizer) {
            case 0:
                cl('ttoo');
                //top-left
                view.left = mousePos.x;
                view.top = mousePos.y;
                view.width = oldView.left + oldView.width - mousePos.x;
                view.height = oldView.top + oldView.height - mousePos.y;
                break;
            case 1:
                //top-right
                // view.left  unchanged             
                view.top = mousePos.y;
                view.width = mousePos.x - oldView.left;
                view.height = oldView.top + oldView.height - mousePos.y;
                break;
            case 2:
                //bottom-right
                view.width = mousePos.x - oldView.left;
                view.height = mousePos.y - oldView.top;
                break;
            case 3:
                //bottom-left
                view.left = mousePos.x;
                view.width = oldView.left + oldView.width - mousePos.x;
                view.height = mousePos.y - (oldView.top);
                break;
        }

        if (view.width < 25) view.width = 25;
        if (view.height < 25) view.height = 25;

        // redraw the image with resizing anchors
        draw(currentImg, true, true);

    } else if (draggingImage) {
        imageClick = false;

        // move the image by the amount of the latest drag
        var dx = mousePos.x - startX;
        var dy = mousePos.y - startY;
        view.left += dx;
        view.top += dy;
        // reset the startXY for next time
        startX = mousePos.x;
        startY = mousePos.y;

        // redraw the image with border
        draw(currentImg, false, true);
    }
}



var text = new Kinetic.Text({
    x: 20,
    y: 30,
    text: '',
    fontSize: '30',
    fontFamily: 'Calibri',
    fill: 'black',
    draggable: true
});

stage.add(layer);
layer.add(text);

document.getElementById("textBox").addEventListener("keyup", function () {
    text.setText(this.value);
    layer.draw();
}, true);

document.getElementById("textSize").addEventListener("change", function () {
    var size = this.value;
    text.fontSize(size);
    layer.draw();
}, true);

document.getElementById("fontFamily").addEventListener("change", function () {
    var font = this.value;
    text.fontFamily(font);
    layer.draw();
}, true);

document.getElementById("fontStyle").addEventListener("change", function () {
    var style = this.value;
    text.fontStyle(style);
    layer.draw();
}, true);

document.getElementById("fill").addEventListener("change", function () {
    var colour = this.value;
    text.fill(colour);
    layer.draw();
}, true);



$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
    handleMouseOut(e);
});

// utility
function cl() {
    console.log.apply(console, arguments);
}

如果需要，

可以提供jsFiddle：）

Answer 1

你可以参考这个问题，答案是引导性和建设性的，并且包含一个jsfiddle，它具有你需要的完全相同的行为。 Kinetic JS - how do you hide all the anchors for a given group ID

Answer 2

您正尝试将KineticJS与html画布绘图命令混合使用。

这种组合并不起作用，因为KineticJS通过接管画布来实现其魔力 - 无法调用像context.beginPath这样的原生画布命令。

// these 2 don't play together

... new Kinetic.Image ...

... ctx.beginPath ...

无论如何，这里是您问题的答案（如果您为项目选择KineticJS）

可以要求Kinetic.Image在单击图像时执行函数：

var image=new Kinetic.Image({
    x: 100,
    y: 50,
    image: img,
    width: 200,
    height: 130,
    draggable: true
}));
image.on("click",function(){

    // The image was clicked
    // Show your anchors now

});
layer.add(image);

[添加：动力学图像调整大小的示例]

我不喜欢维持锚点的开销和复杂性来调整Kinetic.Images的大小。

这是一个示例，可让您在图片的右侧拖动以按比例缩放：

http://jsfiddle.net/m1erickson/p8bpC/

您可以修改此代码以添加化妆品大小调整抓取器（抓取器不是必需的，但如果您更喜欢＆＃34;锚点＆＃34;看，您可以添加它们。）