用CSS在圖像上繪製線條 - 響應行爲

-3

我想通過使用CSS3在圖像上繪製線條，最好使用HTML5 Canvas。我發現這個教程和這個演示其使用HTML DIV：用CSS在圖像上繪製線條 - 響應行爲

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

然而，當我嘗試做一個圖像的影響，該線位於圖像之外。

我該如何獲得直接在圖像頂部繪製的線條？

另外，我會需要線條寬度作出響應，即如果我重新縮放瀏覽器窗口，圖像被重新縮放（這我已經能夠通過使用Javascript，dinamically調整圖像大小），我也需要圖像的像素寬度重新縮放。

我應該放棄並使用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/（注意，它甚至不畫線）。

來源

2016-01-07 Cesar

__Did__你試試？你說過你了。我們怎麼知道？以您的努力爲例，並將其發佈在此處。（並在jsfiddle.net或codepen.io等） – HerrSerker

我已經包含源代碼，它是從演示改編的。我做了一個jsfiddle，但它甚至沒有畫出線條。在我的瀏覽器中，將源代碼保存到html文件中，它確實畫出了線條，但在圖像的外部（下方）。 – Cesar

在小提琴中，你沒有包含jQuery，你試圖調用函數onload而不是按鈕。我糾正它，現在它工作。 https://jsfiddle.net/MrLister/30xh1xpm/1/我說它可行，但它在圖像上方的左上角繪製了一條線。 –

我能夠解決所有的問題，甚至IE8的行爲，與JS庫糾正它。但是，即使在開始的網頁示例中，Firefox的奇怪行爲也讓我在PHP + GD中做到了這一點，它與100％的現代瀏覽器兼容。看起來CSS3是一個嚴肅的開發者在本世紀最糟糕的噩夢。

來源

2016-01-12 15:17:38 Cesar

用CSS在圖像上繪製線條 - 響應行爲

回答

相關問題