javascript - 从一个div的左下角画一条路径到某个目的地

Question

抱歉标题模糊。我不确定如何表达这一点。 所以我想从 div 的左下角(或右下角)到图像中的某个点画一条线。实现这一目标的最佳响应方式是什么？我在这里画了一个例子。

所以我的猜测是像::after 这样的伪元素，但我如何获得这种 flex 以及如何保持响应？如果有人有一些站点示例，我也会很感激。

Answer 1

Canvas 可能有点矫枉过正，但您可以这样做:

CSS 很简单。您将需要一个容器元素、一个 Canvas 元素和图像描述元素。

#vegetable-image {
    /* container */
    position: relative;
}
#vegetable-image > canvas {
    /* This contains your image. The width and height is set in the canvas element */
    background:url(vegetables.jpg);
    background-size:cover;
}
#vegetable-image > div {
    /* style for the element from which you're drawing the line */
    position: absolute;
    top: 20px;
    left: 20px;
    width: 300px;
    height: 200px;
    background: white;
    padding: 10px;
}

HTML:

<div id="vegetable-image">
    <canvas width="600" height="300"></canvas>
    <div><h3>Eat eat eat</h3><p>lorem ipsum dolor sit amet.</p></div>
</div>

JavaScript 获取 Canvas 和描述框，计算框的右下角(减去 10px，这样您就看不到线的末端)，然后绘制线。第一个 lineTo 命令 ctx.lineTo(380,260); 包含您要将线绘制到的坐标。紧随其后的第二个， ctx.lineTo(380,280);，绘制到低 20px 的点以提供 flex 。

var vegetable = document.getElementById("vegetable-image");
var canvas = vegetable.getElementsByTagName("canvas")[0];
var tag = vegetable.getElementsByTagName("div")[0];
var ctx = canvas.getContext("2d");
var lineStartLeft = tag.offsetLeft + tag.offsetWidth - 10; // 10 px back from right edge
var lineStartTop = tag.offsetTop + tag.offsetHeight - 10; // 10 px back from bottom

ctx.beginPath();
ctx.moveTo(lineStartLeft,lineStartTop);
ctx.lineTo(380,260);
ctx.lineTo(380,280);
ctx.lineWidth = 10;  // line thickness
ctx.strokeStyle = '#ffffff';  // line colour
ctx.stroke();

为了响应，您可以设置一个 css 媒体查询以将描述框位置设置为相对位置，并在移动设备上禁用 Canvas 线条绘制。