Question

考虑到未知维度的div，如何在不使用JavaScript的情况下从一个角落到对角线的对角线绘制实线？

我认为CSS3 calc()函数可能对我有所帮助，但似乎你无法将高度和宽度的值拉到另一个属性中（例如转换或背景图像）我希望我能做一些像：

transform: rotate ( calc(atan(height / width)) rad);

（计算可能是错误的，但更重要的是语法是完全发明的。）

我针对此项目定位Firefox，但更喜欢适用于任何现代浏览器的内容。

Answer 1

您可以使用SVG：

<svg style='width: 200px; height: 200px;'>
    <line x1="0" y1="200" x2="200" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

使用百分比坐标，如果需要：

<svg style='width: 100%; height: 100%;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

http://jsfiddle.net/qXKfN/2/

^{（应该在FF, Chrome, Safari, and IE >= 9）}

在各种浏览器中的各种大小，SVG可能会被推出其容器。一种解决方案是设置line-height: 0px;。另一个解决方案，可能是首选解决方案，是在容器上设置position: relative;，在SVG上设置position: absolute;。

http://jsfiddle.net/qXKfN/3/

Answer 2

或者您可以使用插件： https://bitbucket.org/stopsopa/jquery.line 我无法找到工具来在div之上绘制这样的线条，而不会阻止下面的点击，然后创建这个插件的想法就诞生了。

插件基于transform-rotate（css3）和一个div元素。

使用：

$.line(0, 0, 500, 1000);

或

$('selector').line(0, 0, 500, 1000);

您还可以更改线条的颜色或宽度：

$('selector').line(0, 0, 500, 1000, {
   css : {
       borderTop: '5px solid red'
   }
});

你还有回调函数：

$('selector').line(0, 0, 500, 1000, {
   css : {
       borderTop: '5px solid red'
   }
}, function (linediv, opt) {
    linediv.css({
        borderBottom : '1px solid black'
    });
});

Answer 3

有时您不想按照建议使用SVG。这是一个纯HTML +原始JS代码的示例，可以从任何X1,Y1到任何X2,Y2的任何颜色和宽度的线条。

function drawLine(X1, Y1, X2, Y2, color, width) {
  let x1 = X1, y1 = Y1, x2 = X2, y2 = Y2;
  if (X1 > X2) { x1 = X2; y1 = Y2; x2 = X1; y2 = Y1 }
  const dx = x1 - x2
  const dy = y1 - y2
  const d = Math.sqrt(dx * dx + dy * dy)
  const a = Math.atan(dy / dx)
  
  const element = document.createElement('span')
  element.style = `border-top:solid ${color} ${width}px;position:absolute;top: ${y1}px;left:${x1}px;width:${d}px;height:0;transform:translate(-${d/2}px,0) rotate(${a}rad) translate(${d/2}px,0)`
    document.getElementById('root').appendChild(element)
}

drawLine(10, 10, 100, 200, 'red', 5)
drawLine(15, 150, 300, 30, 'green', 15)

<div id="root" style="position:relative">
</div>

在html5中绘制对角线

3 个答案: