3

HTMLのimgタグに画像があります。私の要件は、ユーザーが画像をクリックすると、ポイントをマークし、マウスをドラッグしながら線を引くことです。次に、ユーザーがドラッグを終了して画像をクリックすると、線が表示され、線の寸法もミリメートル/センチメートルで表示されます。つまり、ユーザーは画像上に線を引き、描いた線の距離/長さ (ミリメートル/センチメートル) を示す必要があります。

この機能を Web アプリケーションにどのように実装できますか? 誰でもこの機能を実装するのを手伝ってもらえますか?

4

1 に答える 1

10

html5 キャンバス要素を使用し、画像を css 背景としてキャンバス要素に設定し (画像を再描画する必要がないため、線の描画が容易になります)、キャンバスに線を描画します。

1)mousedownで、マウスの位置を記録し、mousemoveそれらの開始位置の近くに閉じたハンドラーを登録し、ハンドラーを登録してmouseupハンドラーを削除しmousemoveます。

2)mousemoveハンドラーで、現在のマウス位置とマウスの開始位置の間のオフセットを見つけ、このオフセットを開始行の位置に追加してから、この新しい位置を使用してキャンバスを再描画します。

物理的な距離は作品を表示する画面に依存するため、線にラベルを付けることはできません。できる最善の方法は、画像の縮尺/印刷解像度 (dpi で、たとえば 300 ピクセル/インチ) を決定し、それに基づいて線の長さを計算することです。正確な実装は、結果をどのように使用するかによって異なります。

更新: 例

デモ 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: 行の長さ

例を更新しました。画像の物理的な解像度を定義し、その仮定に基づいて線の長さを計算します。

于 2012-09-18T12:55:27.257 に答える