Question

我有一个img标签，我需要用透明覆盖图画它。

我在考虑图片大小和位置canvas，但由于我的上下文是动态的，我需要使用javascript调整参数。

我尝试使用canvas.style.left，canvas.style.top，但它们似乎没有按预期工作（canvas.style.left仅在我为其分配0时才有效。）

此外，当我像这样分配width和height时：

canvas.width = img.clientWidth
canvas.height = img.clientHeight

似乎没有得到正确的价值观。

我正在使用DevExpress从数据库中提取的BinaryImage动态加载Model，这是代码的一部分：

    <div class="container-fluid" style="margin: 10px; margin-bottom: 15px">
    @if (Model.Image != null) {
        Html.DevExpress().BinaryImage(
                        settings => {
                            settings.Name = "mapImage";
                            settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
                        }).Bind((Model.Image).ToArray()).GetHtml();
        <canvas id="mapOverlay" ></canvas>
    }
</div>

请注意，DevExpress代码会生成以下img元素：

<img class="dxeImage_Material" id="mapImage" src="/DXB.axd?DXCache=e86a5e5f-7d8b-4704-9330-ec7b9fa2ad38" alt="" style="width:100%;">

是否有任何DevExpress组件可供使用我可能不知道我可以使用？

修改遵循以下代码：

    function DrawPoint(x, y, z) {
    $("#myModal").modal("show");
    var canvas = document.getElementById("mapOverlay");
    var c = canvas.getContext('2d');
    console.log("Setting canvas stuff");
    var img = document.getElementById('myMap');
    console.log("Image x: " + img.x)
    console.log("Image y: " + img.y)
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.style.left = img.x + "px";
    canvas.style.top = img.y + "px";

    clearCanvas();
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2, false);
    c.fillStyle = "red";
    c.fill();
    c.stroke();
    c.closePath();

}

函数内的console.logs告诉我img.x和img.y都是0，但如果我在浏览器中从控制台获取值，则会有一些价值。

这可能是什么？

Answer 1

请注意，画布宽度/高度属性与画布宽度/高度样式不同。属性效果绘制，而样式效果渲染。见下文：

document.addEventListener("DOMContentLoaded", function(event) {


	var drawStuff = function(canvas, context) {
		context.rect(0, 0, 100, 100);
		context.stroke(); 
	}

	var imageMouseEnter = function(event) {
		var image   = event.target;
		var canvas  = document.getElementById("overlay");
		var context = canvas.getContext("2d");

		canvas.style.left = image.x + "px";
		canvas.style.top = image.y + "px";
		canvas.style.width = image.width + "px";
		canvas.style.height = image.height + "px";

		drawStuff(canvas, context);
	};

	var imageMouseExit = function(event) {

	};

	var images = document.getElementsByTagName('img'); 
	for(var i = 0; i < images.length; i++) {
		images[i].addEventListener('mouseover', imageMouseEnter);
		images[i].addEventListener('mouseout', imageMouseExit);
	}
});

<canvas id="overlay" width="100" height="100" style="position:absolute"></canvas>

<div style="width:350px">
  <img src="http://via.placeholder.com/350x150" />
  <img src="http://via.placeholder.com/145x100" />
  <img src="http://via.placeholder.com/200x100" />
  <img src="http://via.placeholder.com/350x65" />
</div>

如何将画布动态叠加到图像上

1 个答案: