javascript - 通过 css/javascript 对 Angular 图像叠加

Question

我想创建一个 div 叠加层，将不透明度设置为 5%，从而在该图像的第一行文本周围创建一个对 Angular 线边界框。在我看来，如果我有四个 Angular 的 x、y 坐标，我应该能够创建叠加层，但我无法弄清楚标记 div 的正确语法是什么。我认为可以做到这一点是不是错了，如果不能，有人可以指出一些方法吗？

Answer 1

在简单情况下，您可以使用 css div 的 transform 属性，而不是使用 canvas 和 javascript。例如用

#diag {
    background-color: rgba(255, 0, 255, 0.25);
    width: 700px;
    height: 60px;
    position: absolute;
    left: 100px;
    top: 160px;
    transform: rotate(2deg) skew(30deg)
}

您可以在图像文本的第一行放置一个 div，可以使用 CSS 轻松设置边框样式，并可以直接用于事件(悬停、点击)。

如果您需要指定 4 个 Angular ，但通常仅一个变换是不够的，您必须在放置在图像上的 Canvas 中绘制叠加层。这是可行的，因为 Canvas 在默认情况下是透明的，只有您明确绘制的内容才会可见，而图像在其他区域保持不变。例如使用:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx.beginPath();
ctx.moveTo(166, 282);
ctx.lineTo(855, 296);
ctx.lineTo(897, 351);
ctx.lineTo(212, 349);
ctx.closePath();
ctx.fillStyle = "rgba(0, 255, 0, 0.25)";
ctx.strokeStyle = "#0F0";
ctx.lineWidth = 4;
ctx.fill();
ctx.stroke();

我用绿色突出显示了第三行(填充命令)并添加了边框(描边命令)。

http://jsfiddle.net/hr9afs4z/1/