내 그림을 배경으로 확대하십시오.

Question

HTML5 캔버스와 자바 스크립트가있는 페인트처럼 프로그램을 만듭니다. 그리기는 배경 이미지에서 수행됩니다. 백그라운드에서 내 그림을 함께 확대/축소하는 방법.

전에 그것을 확대 :

이 그것을 확대 한 후 (필요한이 결과) :

참고 : 클릭 한 위치 줌을해야한다 재치 h 배경 이미지의 마우스

Answer 1

나는 이것을 전에했다!

우선, 캔버스에 줌 레벨 속성을 설정했습니다.

Main.canvas.zoomX = 1; 
Main.canvas.zoomY = 1; 

참조 용으로 캔버스의 원래 크기를 유지합니다.

Main.canvas.originW = Main.canvas.width; 
Main.canvas.originH = Main.canvas.height; 

참조 용 캔버스의 원본 왼쪽과 위쪽도 유지됩니다.

Main.canvas.gLeftStart = 0; 
Main.canvas.gTopStart = 0; 

다음으로 확대 비율을 설정합니다. 확대/축소 수준은 줌 이벤트가 발생할 때마다이 값으로 조정됩니다.

Main.canvas.zoomPerc = 0.05; 

다음으로, 내 캔버스에 이벤트 리스너를 설정하여 마우스 휠을 감시합니다.

Main.canvas.addEventListener('wheel', zoom, true); 

이제 줌 기능을 사용하여 빠른 기능을 작성한 다음 설명하겠습니다.

function zoom(evt) 
{ 
    var x; 
    var y; 

    Main.canvas.xLayerS = (evt.layerX + (Main.canvas.gLeftStart * -1))/(Main.canvas.originW * Main.canvas.zoomX); 
    Main.canvas.yLayerS = (evt.layerY + (Main.canvas.gTopStart * -1))/(Main.canvas.originH * Main.canvas.zoomY); 

    Main.canvas.leftPerc = Main.canvas.gLeftStart/(Main.canvas.originW * Main.canvas.zoomX); 
    Main.canvas.topPerc = Main.canvas.gTopStart/(Main.canvas.originH * Main.canvas.zoomY); 

    if(evt.deltaY > 1) 
    { 
    Main.canvas.zoomX *= 1 + Main.canvas.zoomPerc; 
    Main.canvas.zoomY *= 1 + Main.canvas.zoomPerc; 
    } 
    else 
    { 
    Main.canvas.zoomX *= 1 - Main.canvas.zoomPerc; 
    Main.canvas.zoomY *= 1 - Main.canvas.zoomPerc; 
    } 

    var iiDS; 
    var cmd; 

    Main.canvas.xLayer = Main.canvas.xLayerS * (Main.canvas.originW * Main.canvas.zoomX); 
    Main.canvas.yLayer = Main.canvas.yLayerS * (Main.canvas.originH * Main.canvas.zoomY); 

    Main.context.clearRect(0, 0, Main.canvas.width, Main.canvas.height); 
    Main.context.beginPath(); 

    Main.canvas.gLeftStart = (evt.layerX - Main.canvas.xLayer); 
    Main.canvas.gTopStart = (evt.layerY - Main.canvas.yLayer); 

    for(iiDS = 0; iiDS < Main.dataPoints.length; iiDS++) 
    { 
     if(iiDS === 0) 
     { 
     cmd = 'moveTo'; 
     } 
     else 
     { 
     cmd = 'lineTo'; 
     } 

     Main.dataPoints[iiDS].xPerc = Main.dataPoints[iiDS].x/Main.range.x; 
     Main.dataPoints[iiDS].yPerc = Main.dataPoints[iiDS].y/Main.range.y; 

     x = Main.canvas.gLeftStart + (Main.dataPoints[iiDS].xPerc * (Main.canvas.originW * Main.canvas.zoomX)); 
     y = Main.canvas.gTopStart + (Main.dataPoints[iiDS].yPerc * (Main.canvas.originH * Main.canvas.zoomY)); 

     Main.context[cmd](x, y); 
    } 

    Main.context.stroke(); 
} 

이제 캔버스의 크기가 조정되었으므로 그 안에 무엇이든 다시 그려야합니다. 캔버스 크기를 변경할 때마다 캔버스를 지우는 것을 기억하십시오. 캔버스에 이미지가 있으면 간단히 그 이미지를 해당 크기로 다시 그립니다. 캔버스에 데이터 포인트 (예 : 차트)가있는 경우 데이터 포인트에 픽셀 위치가 아닌 차트를 따라 비율을 지정할 것을 제안합니다.

하지만 더 중요한 점은 확대/축소시 캔버스의 크기와 위치를 다시 지정하지 않는 것이 좋습니다. 귀하의 페이지가 혼란스럽고 엉망이 될 수 있습니다. 대신, 크기에 대한 백분율을 사용하고 (내가 보여 줬던 것처럼) 왼쪽 및 위쪽 위치 지정 값을 도면의 시작점으로 사용하십시오. 데이터 요소가 차트에서 특정 비율의 비율 인 경우 어떤 크기로든 그릴 수 있습니다. 또한 캔버스 외부에 그릴 수 있으며 단지 표시되지 않습니다. 그러면 캔버스가보기 포트와 비슷해집니다.

당신은 많은 회사가 많은 돈을 지불하는 이런 식으로 정말 인상적인 차트를 만들 수 있습니다. 재미있어!

Answer 2

Context2d.scale (x, y)을 시도 했습니까?다음

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

context.scale(2, 2); 

paintBackGround(context); 
paintForeGround(context); 

규모 (factorWidth, factorHeight) 요인에 의해 캔버스의 모든 좌표를 저울을 할 수있는, 그래서 배경과 도면의 크기를 조절합니다. 이 예제는 크기를 두 배로 늘립니다. 좌표를 직접 조정할 필요는 없으며, 캔버스를 사용하여 조정할 수 있습니다. 여기 은 예입니다 http://www.html5canvastutorials.com/advanced/html5-canvas-transform-scale-tutorial/

여기에 유일한 문제 : 당신이 그리기 전에 당신이 원래의 스케일 없음의 좌표 원래의 도면을 포함하는 모델이 필요 그래서,이 확장 한 후 그릴 수, 확장 할 필요가있다 (paintForeGround() 내 예에서)

스케일()은 이른바 변환의 일부입니다. 캔버스의 빌드 기능을 사용하여 캔버스의 내용을 회전하고 크기를 조절할 수 있습니다 (벡터를 따라 이동). html5canvastutorials를 살펴보십시오. 이 작업은 백그라운드에서 행렬 중복을 사용하지만 실제로 사용하는 것은 간단합니다.