有什麼辦法可以選擇一個自由形成的圖像？

有什麼方法可以選擇一個自由形成的圖像？有什麼辦法可以選擇一個自由形成的圖像？

http://www.ismfilms.com/diagram/diagramAS3.swf

例如，我想這將Flash轉換成HTML5。我需要選擇這些圖像中的每一個。

任何想法傢伙？

來源

2013-11-20 Nevin Madhukar K

我沒有用Fabric.js但它似乎對此類問題有用：http://fabricjs.com/ 這裏有一個例子：HTTP：// fabricjs.com/per-pixel-drag-drop/ – TheBronx

請參閱我認爲對您有用的鏈接https://www.google.com/doubleclick/studio/swiffy/和https://pixelplant.com/ –

@BipinKumarPal thnx的幫助，但我已經看過這些。我想自己做這個，而不是使用任何軟件。只是簡單的邏輯會更有幫助。 :) Thnx再次。 –

我會使用Fabric.js。但是，如果這不是一個選項，我會創建所有圖像，以png格式並且與畫布寬度和高度相同。

然後我會在畫布上繪製所有圖像。

當鼠標進入畫布時，獲取座標和檢查每個圖像上的像素，直到找到不透明的像素。發生這種情況時，請使用選定的圖像重新繪製畫布。

但是，如何檢查從JavaScript的圖像像素？看來你只能在畫布上繪製圖像（here和here）。但是，您的圖像始終保持一致，因此您可以先生成該信息：爲每個圖像創建一個0（透明像素）和1的矩陣，就是這樣，將所有矩陣保存在數組中，並在使用該信息時鼠標進入畫布。

一些僞代碼：

paint() { 
    for (image in images) { 
     if (image.isSelected) { 
      canvas.draw(image, opacity=1.0) 
     } else { 
      canvas.draw(image, opacity=0.5) 
     } 
    } 
} 

canvas.on("mouseover") { 
    unselectAllImages(); 
    coords = getCoords(); 
    for (var i=0; i<matrixArray.length; i++) { 
     matrix = matrixArray[i]; 
     if (matrix[coords.x, coords.y]!=0) { 
      //you have found a non-transparent pixel in this image 
      //that means this is the image going to be selected 
      images[i].isSelected = true; 
      break; 
     } 
    } 
} 

canvas.on("mouseout") { 
    unselectAllImages(); 
}

來源

2013-11-20 13:02:47 TheBronx

簡單的方法：您可以爲每個區域分配不同的顏色並保存這些顏色。當使用鼠標點擊/懸停時，您檢查顏色並獲取區域，重新繪製。

使用隱藏信息：如果您不能使用不同的顏色，可以考慮使用非常非常相似的顏色，其中，例如紅色成分是一樣的，同樣的藍色，但綠色有+1的偏移。例如，這些顏色（或地區的圖像）看起來同爲人類，而不是PC：

#007eff 
#007dff 
#007cff 
#007bff 
#007aff 
#0079ff

enter image description here

多少種不同的藍色，你看到了什麼？

來源

2013-11-20 11:58:45 ViliusL

如果你願意做的工作，並確定每個形狀爲一組JS繪圖指令 - ctx.startPath（），ctx.moveTo（），ctx.arcTo （）等 - 那麼你可以使用下面的邏輯來檢測你的光標懸停在其形狀：

get current cursor coordinates 
for each shape { 
    draw shape - but don\'t stroke or fill it 
    use ctx.isPointInPath(coordinates) to check if cursor is over shape 
    if true 
     draw/fill shape with highlight colors 
    if false 
     draw/fill shape with normal colors for that shape

...但如果你想重新在OP鏈接到SWF動畫，我認爲你最好的選擇是使用一個專門的畫布庫或（織物，畫架，拉斐爾等）;或者，看看您是否可以使用不同的技術（如SVG）獲得更好的結果。

這裏是我的世界地圖的演示：http://scrawl.rikweb.org.uk/demo014.html

來源

2013-11-20 14:03:29 KaliedaRik

我認爲SVG是爲這個完美的。您必須在矢量圖形程序中重新繪製圖形（或手動編寫SVG），然後可以將相應的元素分組在一起，通過CSS創建懸停效果並添加JavaScript事件。也許一些沿these lines：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="170 220 325 260" width="100%" height="100%"> 
    <style type="text/css"> 
     #A rect, #A path{ 
      fill:#c73c43; 
     } 
     #B rect, #B path { 
      fill:#c7bc3c; 
     } 
     #C rect, #C path { 
      fill: #3cc757  
     } 
     g:hover rect, g:hover path { 
      opacity: .7; 
     } 
    </style> 
    <g id="B"> 
     <path 
      d="m 434.15266,258.14294 c 29.87306,26.36958 60.00494,102.39977 45.97576,102.54668 l -130.94303,1.37121 z"/> 
     <rect width="139.40105" height="40.406101" x="339.08868" y="158.4413" 
      transform="matrix(0.87295361,0.48780323,-0.48780323,0.87295361,0,0)"/> 
     <text x="251.52798" y="365.45844">B</text> 
     <text x="400.52548" y="336.6691">B</text> 
    </g> 
    <g id="C"> 
     <path 
      d="m 316.27906,227.87286 c 39.26266,-6.79694 117.42057,17.28332 108.75529,28.31746 l -80.8785,102.98848 z"/> 
     <text x="344.46201" y="285.6564">C</text> 
    </g> 
    <g id="A"> 
     <path 
      d="m 219.2031,296.76808 c 20.20305,-34.34519 89.10998,-78.39462 91.92389,-64.64976 l 26.26396,128.28937 z"/> 
     <path 
      d="m 194.5067,461.78603 c -13.60455,-37.45226 -3.66352,-118.62918 8.72407,-112.04233 l 115.62118,61.47927 z"/> 
     <text x="211.12189" y="403.84424">A</text> 
     <text x="262.63965" y="305.85944">A</text> 
    </g> 
    <script type="text/javascript"> 
     Array.prototype.forEach.call(
      document.getElementsByTagName("g"), 
      function(gElement){ 
      gElement.addEventListener("click", function(event){ 
       alert(gElement.getAttribute("id")); 
      }); 
      } 
     ); 
    </script> 
    </svg>

來源

2013-11-20 14:36:11

有什麼辦法可以選擇一個自由形成的圖像？

回答

相關問題