kineticjs 클릭시 이미지 앵커 표시

Question

이미지 업로드 및 텍스트 입력 기능이있는 kineticjs 캔버스가 있습니다. 두 함수 모두 정상적으로 작동하지만 크기를 조정할 앵커를 표시 할 수 없습니다. 이미지 크기 조정 앵커를 가져와야합니다. 이미지의 "onClick"을 보여줍니다.

어떤 도움이 많이 감사합니다 :) 미리 감사드립니다. 여기

필요한 경우 : jsFiddle를 제공 ​​할 수있는 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); 
} 

입니다

Answer 1

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

: I는 오버 헤드와 복잡성을 싫어하는

[첨가 Kinetic.Image 예는 리사이징] 앵커가 키네틱 크기를 조정합니다. 이미지. 당신은 화장품 크기 조정 그래버를합니다 (그래버는 필요하지 않지만 추가하려면이 코드를 수정할 수

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

: 여기

은 비례 적으로 확장 할 수있는 이미지의 오른쪽에 드래그 할 수 있습니다 예입니다 "앵커"모양을 선호하는 경우 추가 할 수 있습니다.

Answer 2

당신은이 질문을 참조 할 수 있습니다

는 답변을 유도하고 건설하고, 동일한 행위와 jsfiddle이 포함되는 너는 필요해. Kinetic JS - how do you hide all the anchors for a given group ID