在图像上用 CSS 画线 - 响应行为

Question

我想用 CSS3 在图像上画线，最好是 HTML5 Canvas。我找到了本教程和使用 html div:

的演示

http://www.monkeyandcrow.com/samples/css_lines/

但是，当我尝试在图像上做效果时，线条位于图像之外。

如何让线条直接绘制在图像上方？

此外，我还需要线宽来响应，即，如果我重新缩放浏览器 window，图像也会重新缩放（我已经可以使用 Javascript ，动态调整图像大小），我还需要图像的像素宽度来重新缩放。

我应该放弃并改用 Canvas HTML5 吗？浏览器兼容性如何？

完整代码在这里：

<!DOCTYPE html>
<html lang="es">
 <head>
    <meta charset="utf-8">
    <title>Lines with CSS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
    <style>
        div.line{
            -webkit-transform-origin: 0 50%;
               -moz-transform-origin: 0 50%;
                    transform-origin: 0 50%;

            height: 5px; /* Line width of 3 */
            background: #948C79; /* Black fill */
            opacity: 0.5;
            box-shadow: 0 0 8px #B99B7E;

            /* For some nice animation on the rotates: */
            -webkit-transition: -webkit-transform 1s;
               -moz-transition:    -moz-transform 1s;
                    transition:         transform 1s;
          }

          div.line:hover{
            background: #C30;
            box-shadow: 0 0 8px #C30;
            opacity: 1;
          }

          div.line.active{
            background: #666;
            box-shadow: 0 0 8px #666;
            opacity: 1;
          }
    </style>
    <script>
        function createLine(x1,y1, x2,y2){
            var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
            var angle  = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
            var transform = 'rotate('+angle+'deg)';
            var line = $('<div>')
            .appendTo('#page')
            .addClass('line')
            .css({
              'position': 'relative',
              'transform': transform
                })
                .width(length)
                .offset({left: x1, top: y1});

            return line;
            } // function           

    </script>
</head>
<body>
    <p>Lines with CSS</p>

    <input type="button" value="Draw line" onClick="createLine(0,0,20,20);" />
    <div id="page" style="height:auto;"><p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Man_o%27war_cove_near_lulworth_dorset_arp.jpg/300px-Man_o%27war_cove_near_lulworth_dorset_arp.jpg" class="fotografia" /></p></div>
</body>

jsfiddle 是：https://jsfiddle.net/30xh1xpm/（注意它甚至没有划线）。

Answer 1

我能够解决所有问题，甚至是 IE8 行为，使用 JS 库纠正它。

然而，Firefox 的奇怪行为，即使在开头的网页示例中，也迫使我通过 PHP + GD 来完成，它与 100% 的现代浏览器兼容。看来 CSS3 对于认真的开发人员来说是本世纪最糟糕的噩梦。

在图像上用 CSS 画线 - 响应行为

Draw lines with CSS over an image - responsive behaviour

css

image

lines