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

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

css image

在图像响应行为上使用CSS绘制线条,css,image,lines,Css,Image,Lines,我想使用CSS3在图像上画线，最好是HTML5画布。我找到了本教程和使用html div的演示：但是，当我尝试在图像上执行效果时，线位于图像的外部我怎样才能让线直接画在图像的顶部此外，我还需要线条宽度具有响应性，即，如果我重新缩放浏览器窗口，图像将被重新缩放（这是我通过使用Javascript，动态调整图像大小而实现的），并且我还需要图像的像素宽度来重新缩放我应该放弃使用画布HTML5吗？浏览器兼容性如何完整代码如下： <!DOCTYPE html> <html

我想使用CSS3在图像上画线，最好是HTML5画布。我找到了本教程和使用html div的演示：

但是，当我尝试在图像上执行效果时，线位于图像的外部

我怎样才能让线直接画在图像的顶部

此外，我还需要线条宽度具有响应性，即，如果我重新缩放浏览器窗口，图像将被重新缩放（这是我通过使用Javascript，动态调整图像大小而实现的），并且我还需要图像的像素宽度来重新缩放

我应该放弃使用画布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>


使用CSS的行
分割线{
-webkit转换源：0.50%；
-moz变换原点：050%；
变换原点：0.50%；
高度：5px；/*线宽为3*/
背景：#948C79；/*黑色填充*/
不透明度：0.5；
盒影：0 0 8px#B99B7E；
/*要在“旋转”（rotates）上创建一些漂亮的动画，请执行以下操作：*/
-webkit转换：-webkit转换1s；
-moz变换：moz变换1s；
转变：转变1s；
}
div.line:悬停{
背景：#C30；
盒影：0 0 8px#C30；
不透明度：1；
}
div.line.active{
背景:#666；
盒影：08px#666；
不透明度：1；
}
函数createLine（x1，y1，x2，y2）{
变量长度=数学sqrt（（x1-x2）*（x1-x2）+（y1-y2）*（y1-y2））；
变量角度=数学atan2（y2-y1，x2-x1）*180/数学PI；
变量变换='旋转（'+角度+'度）'；
变量行=$（''）
.appendTo（“#第页”）
.addClass（'行'）
.css({
'位置'：'相对'，
“变换”：变换
})
.宽度（长度）
.偏移量（{左：x1，上：y1}）；
回流线；
}//函数
使用CSS的行

jsfiddle是：（注意，它甚至没有划清界限）。

我能够解决所有问题，甚至IE8行为，有一个JS库纠正了它

然而，Firefox的奇怪行为，甚至在一开始的网页示例中，迫使我通过PHP+GD来实现，它与100%的现代浏览器兼容。对于一个认真的开发人员来说，CSS3似乎是本世纪最糟糕的噩梦。

你试过了吗？你说是的。我们怎么知道？做一个你的努力的例子，并张贴在这里。（在jsfiddle.net或codepen.io或类似文件中）我已经包含了源代码，它是根据演示改编的。我做了一个jsfiddle，但它甚至没有画出界限。在我的浏览器中，源代码保存到一个html文件中，它确实划出了界限，但在图像的外面（下面）。在fiddle中，您没有包括jQuery，并且您尝试调用onload函数，而不是从按钮。我纠正了它，现在它工作了。我说它是可行的，但它在图像上方的左上角画了一条线。感谢您的更正，我以前没有使用过JSFIDLE。现在我有一个几乎可以工作的例子，在一个div中有一个背景图像，甚至有响应性。当我完成它时，我将更新小提琴中的代码。我曾想过使用PHP+GD和jQueryAjax重载来实现这一点，这将更兼容浏览器。另一个解决方案是HTML5+Canvas，但它也面临兼容性问题。然而，我坚持使用CSS方法，因为我发现它更有趣。