Question

我想使用CSS3在图像上绘制线条，最好是HTML5 Canvas。我找到了这个教程和这个使用html div的演示：

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

但是，当我尝试对图像执行效果时，线条位于图像外部。

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

此外，我还需要线宽响应，即，如果我重新缩放浏览器窗口，图像将被重新缩放（我已经能够通过使用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

我能够通过JS库来解决所有问题，甚至是IE8行为，并对其进行了纠正。

但是，Firefox的奇怪行为，即使在开头的网页示例中，也是我通过PHP + GD来实现的，它与100％的现代浏览器兼容。对于一个认真的开发者来说，CSS3似乎是本世纪最糟糕的噩梦。

使用CSS在图像上绘制线条 - 响应行为

1 个答案: