使用javascript在圖像上畫一條線

Question

我在html img標簽中有一個圖像。 我的要求是，當用戶點擊圖像時，它將標記一個點並在拖動鼠標時繪制一條線。 然后，當用戶完成拖動並單擊圖像時，它應顯示該行還顯示以毫米/厘米為單位的線的尺寸。 即，用戶必須在圖像上畫一條線並顯示他繪制的線的距離/長度（以毫米/厘米為單位）。

如何在Web應用程序中實現此功能？ 有人可以幫我實現這個功能嗎？

Answer 1

使用html5 canvas元素，將圖像設置為canvas元素的css背景（使得繪制線條更容易，因為您不必重繪圖像）並在畫布上繪制線條：

1）在mousedown ，記錄鼠標位置並注冊圍繞這些起始位置關閉的mousemove處理程序，並注冊mouseup處理程序以刪除mousemove處理程序。

2）在mousemove處理程序中，找到當前鼠標位置和鼠標起始位置之間的偏移量，將此偏移量添加到起始行位置，然后使用此新位置重繪畫布。

您無法使用物理距離標記線條，因為這取決於顯示您工作的屏幕。 您可以做的最好的事情是決定圖像的比例/打印分辨率（以dpi為單位，例如每英寸300像素），並根據該比例計算線條的長度。 確切的實現取決於您希望如何使用結果。

更新：示例

DEMO JSFIDDLE

HTML

<canvas id="canvas" width="200" height="200">
    Your browser doesn't support canvas
</canvas>

CSS

canvas{
    background-image: url("image.jpg");
    background-position: center;
    background-size: 100% 100%;
}

JS

$(document).ready(function(){

    var imageDpi = 300;

    var can = document.getElementById('canvas');
    var ctx = can.getContext('2d');
    var startX, startY;

    $("canvas").mousedown(function(event){
        startX = event.pageX;
        startY= event.pageY;

        $(this).bind('mousemove', function(e){
            drawLine(startX, startY, e.pageX, e.pageY);
        });
    }).mouseup(function(){
        $(this).unbind('mousemove');
    });

    function drawLine(x, y, stopX, stopY){
        ctx.clearRect (0, 0, can.width, can.height);
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(stopX, stopY);
        ctx.closePath();
        ctx.stroke();

        // calculate length   
        var pixelLength = Math.sqrt(Math.pow((stopX - x),2) + Math.pow((stopY-y),2));
        var physicalLength = pixelLength / imageDpi;
        console.log("line length = " + physicalLength + 
                    " inches (image at " + imageDpi + " dpi)");
    }
});

更新2：線路長度

我更新了我的例子。 它定義了圖像的物理分辨率，並根據該假設計算了線的長度。