使用javascript在图像上画一条线 [英] Draw a line on an Image using javascript

问题描述

我在html img标签中有一张图片.我的要求是，当用户单击图像时，它将在拖动鼠标的同时标记一个点并画一条线.然后，当用户完成拖动并单击图像时，它应该显示的线条还以毫米/厘米为单位显示线条的尺寸.即，用户必须在图像上画一条线，并显示他画出的线的距离/长度(以毫米/厘米为单位).

I have an image in html img tag. My requirement is that when a user click on the image it will mark a point and draw a line while dragging the mouse. Then, While user finishes the drag and clicks on the image it should display the line also show the dimension of the line in millimeter/centimeter. ie , User has to draw a line on the image and show the distance/length (in millimeter/centimeter)of line he drawn.

如何在Web应用程序中实现此功能?有人可以帮我实现此功能吗?

How can implement this feature in a web application? Can anyone please help me to implement this feature ?

推荐答案

使用html5 canvas元素，将图像设置为canvas元素的css背景(使绘制线条更加容易，因为您不必重新绘制图像)，然后在画布上绘制线条:

Use the html5 canvas element, set the image as a css background to the canvas element (makes drawing the lines easier because you don't have to redraw the image) and draw the line on the canvas:

1)在mousedown上，记录鼠标位置并注册一个在那些起始位置附近关闭的mousemove处理程序，并注册一个mouseup处理程序以删除mousemove处理程序.

1) On mousedown, record the mouse position and register a mousemove handler closed around those starting positions, and register a mouseup handler to remove the mousemove handler.

2)在mousemove处理程序中，找到当前鼠标位置和鼠标起始位置之间的偏移量，将此偏移量添加到起始行位置，然后使用此新位置重新绘制画布.

2) In the mousemove handler, find the offset between the current mouse position and the mouse's starting position, add this offset to the starting line position and then redraw the canvas using this new position.

您不能用物理距离标记线，因为这将取决于显示您的工作的屏幕.最好的办法是确定图像的缩放比例/打印分辨率(以dpi为单位，例如每英寸300像素)，然后根据该分辨率计算线条的长度.确切的实现方式取决于您要如何使用结果.

You can't label the line with a physical distance because this will depend on the screen that displays your work. The best you can do is decide on a scale/print resolution for your image (in dpi, e.g. 300 pixels per inch) and calculate the length of the line based on that. The exact implementation depends on how you want to use the results.

更新:示例

演示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:行长

我更新了我的示例.它定义了图像的物理分辨率，并根据该假设计算线的长度.

I updated my example. It defines the image's physical resolution and calculates the line's length based on that assumption.

这篇关于使用javascript在图像上画一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！