使用javascript在图像上画一条线

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

如何在Web应用程序中实现此function？ 有人可以帮我实现这个function吗？

Answer 1

使用html5 canvas元素，将图像设置为canvas元素的css背景（使得绘制线条更容易，因为您不必重绘图像）并在canvas上绘制线条：

1）在mousedown ，记录鼠标位置并注册围绕这些起始位置关闭的mousemove处理程序，并注册mouseup处理程序以删除mousemove处理程序。

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

您无法使用物理距离标记线条，因为这取决于显示您工作的屏幕。 您可以做的最好的事情是决定图像的比例/打印分辨率（以dpi为单位，例如每英寸300像素），并根据该值计算线条的长度。 确切的实现取决于您希望如何使用结果。

更新：示例

DEMO JSFIDDLE

HTML

  Your browser doesn't support 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：线路长度

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