用画布线定位 body 元素答案

【问题标题】：positioning the body element with canvas line用画布线定位 body 元素
【发布时间】：2019-12-17 15:03:40
【问题描述】：

我有一个带图像的画布。当用户双击它时，我在画布上添加一条水平线，并在该线的前面添加一个X 标记。这个X 标记在画布之外。然而不知何故，这个 X 标记的 TOP 位置没有与水平线正确对齐，它偏离了几个像素

（请以全页模式运行演示以查看问题）

$(function(){

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};  
var img = new Image();

img.src = 'https://i.ndtvimg.com/i/2016-10/spud-boxer-best-dressed-dog_650x400_41476182056.jpg';
img.addEventListener('load', function() {
	canvas.width = img.naturalWidth;
	canvas.height = img.naturalHeight;
	ctx.drawImage(img, 0, 0);
	}, false);


$("#canvas").dblclick(function (e) {
    var mousePos = getMousePos(canvas, e);
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#df4b26';
    ctx.moveTo(0, mousePos.y);
    ctx.lineTo(canvas.width, mousePos.y);
    ctx.closePath();
    ctx.stroke();
    
    var top = e.clientY;
    var left = canvas.width + mousePos.rectLeft + 5; 

    $("body").append($("<span>x</span>").css({ top: top, left: left, position: 'absolute' }));
});

function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: Math.floor(evt.clientX - rect.left),
            y: Math.floor(evt.clientY - rect.top),
            rectLeft: rect.left,
            rectTop: rect.top
        };
    }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" style="max-width: 100%;"></canvas>

【问题讨论】：

标签： jquery html css html5-canvas

【解决方案1】：

它对齐得很好，但由于font-size 和line-height，内容区域（x 所属的区域）将对齐而不是x。

您可以添加line-height:0 来解决此问题：

$(function(){

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};  
var img = new Image();

img.src = 'https://i.ndtvimg.com/i/2016-10/spud-boxer-best-dressed-dog_650x400_41476182056.jpg';
img.addEventListener('load', function() {
	canvas.width = img.naturalWidth;
	canvas.height = img.naturalHeight;
	ctx.drawImage(img, 0, 0);
	}, false);


$("#canvas").dblclick(function (e) {
    var mousePos = getMousePos(canvas, e);
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#df4b26';
    ctx.moveTo(0, mousePos.y);
    ctx.lineTo(canvas.width, mousePos.y);
    ctx.closePath();
    ctx.stroke();
    
    var top = e.clientY;
    var left = canvas.width + mousePos.rectLeft + 5; 

    $("body").append($("<span class='fix'>x</span>").css({ top: top, left: left, position: 'absolute' }));
});

function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: Math.floor(evt.clientX - rect.left),
            y: Math.floor(evt.clientY - rect.top),
            rectLeft: rect.left,
            rectTop: rect.top
        };
    }

})

.fix {
 line-height:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" style="max-width: 100%;"></canvas>

【讨论】：