Question

有没有办法选择自由形成的图像？

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

例如，我试图将此flash转换为html5。我需要选择这些图像中的每一个。

任何想法的人？

Answer 1

简单方法：您可以为每个区域指定不同的颜色并保存这些颜色。使用点击/悬停鼠标时，检查颜色并获取您重绘的区域。

使用隐藏信息：如果不能使用不同的颜色，请考虑使用非常相似的颜色，例如红色组件相同，蓝色相同，但绿色+1偏移量。例如，这些颜色（或图像中的区域）对于人类看起来相同，但不适用于PC：

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

enter image description here

您看到多少种不同的蓝色颜色？

Answer 2

我会使用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();
}

Answer 3

如果你愿意做这项工作并将每个形状定义为一组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动画，我认为您最好的选择是使用专用的画布库或（Fabric，Easel，Raphael等）;或者，看看你是否可以使用SVG等其他技术取得更好的效果。

以下是我对世界地图的演示：http://scrawl.rikweb.org.uk/demo014.html

Answer 4

我认为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>

有没有办法选择自由形成的图像？

4 个答案: