자유로운 이미지를 선택하는 방법이 있습니까?

Question

자유로운 이미지를 선택하는 방법이 있습니까? 예를 들어

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

는 HTML5로이 플래시를 변환하려합니다. 이미지 하나 하나를 선택해야합니다.

어떤 사람입니까? ??

Answer 1

Fabric.js를 사용합니다. 그러나 이것이 옵션이 아니라면, 캔버스와 동일한 너비와 높이로 모든 이미지를 png 형식으로 작성합니다.

그럼 모든 이미지를 캔버스에 그립니다.

마우스가 캔버스에 들어가면 좌표를 얻고 은 투명하지 않은 픽셀을 찾을 때까지 모든 이미지에서 해당 픽셀을 확인합니다. 그런 경우 선택한 이미지로 캔바스를 다시 칠하십시오.

하지만 어떻게 자바 스크립트에서 이미지의 픽셀을 확인할 수 있습니까? 혼자 캔버스에 이미지를 그릴 수있는 것 같습니다 (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 2

간단한 방법 : 각 지역마다 다른 색상을 지정하고 저장할 수 있습니다. 클릭/마우스를 사용하면 색상을 확인하고 다시 칠하는 영역을 얻습니다. 당신이 다른 색상을 사용하지 경우, 예를 들어 적색 성분이 같은 동일 파란색이고, 아주 아주 유사한 색상을 사용하는 것이 좋습니다하지만 녹색 +1 오프셋이 있습니다 숨겨진 정보를 사용

. 예를 들어 (이미지 또는 지역) 이러한 색상은 PC에 대한 인간에 대한 동일 보이지만,하지 : 당신이 볼

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

얼마나 많은 다른 푸른 색?

Answer 3

당신은 JS 그리기 지침의 집합으로 각각의 모양을 일을하고 정의하고자하는 경우 - ctx.startPath(), ctx.moveTo(), ctx.arcTo -() 등 당신은 커서가 위로 가져 가면되는 형상을 감지하기 위해 다음과 같은 논리를 사용할 수 있습니다 : 당신이 영업 이익에 링크 된 SWF 애니메이션을 다시하고자하는 경우,

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 

을 ...하지만 최선의 방법은 전용 캔버스 라이브러리 또는 (패브릭, 이젤, 라파엘 등)을 사용하는 것입니다. 또는 SVG와 같은 다른 기술을 사용하여 더 나은 결과를 얻을 수 있는지 확인하십시오. 내가 SVG이 최적이라고 생각 http://scrawl.rikweb.org.uk/demo014.html

Answer 4

:

여기에 세계지도 내 데모입니다.벡터 그래픽 프로그램에서 그래픽을 다시 그려야합니다 (또는 SVG를 직접 작성해야합니다). 그런 다음 해당 요소를 그룹화하고 CSS를 통해 호버 효과를 만들고 JavaScript 이벤트를 추가 할 수 있습니다. 여기 당신은 예를 http://fabricjs.com/ : 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>