포인트 확대 (스케일 및 번역 사용)

Google지도 확대와 같이 HTML 5 캔버스에서 마우스 아래의 포인트를 확대하고 싶습니다 . 어떻게하면 되나요?

더 좋은 해결책은 줌의 변화에 ​​따라 단순히 뷰포트의 위치를 ​​옮기는 것입니다. 줌 포인트는 단순히 기존 줌의 포인트와 동일하게 유지하려는 새 줌입니다. 다시 말해, 사전 확대 된 뷰포트와 사후 확대 된 뷰포트는 뷰포트에 대해 동일한 줌 포인트를 갖습니다. 우리는 원점을 기준으로 스케일링한다고 가정합니다. 뷰포트 위치를 적절하게 조정할 수 있습니다.

scalechange = newscale - oldscale;
offsetX = -(zoomPointX * scalechange);
offsetY = -(zoomPointY * scalechange);

따라서 실제로 확대 한 지점을 기준으로 확대 한 정도에 따라 확대 할 때 아래로 이동하고 오른쪽으로 이동할 수 있습니다.

마지막으로 해결했습니다.

var zoomIntensity = 0.2;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = 600;
var height = 200;

var scale = 1;
var originx = 0;
var originy = 0;
var visibleWidth = width;
var visibleHeight = height;


function draw(){
    // Clear screen to white.
    context.fillStyle = "white";
    context.fillRect(originx,originy,800/scale,600/scale);
    // Draw the black square.
    context.fillStyle = "black";
    context.fillRect(50,50,100,100);
}
// Draw loop at 60FPS.
setInterval(draw, 1000/60);

canvas.onwheel = function (event){
    event.preventDefault();
    // Get mouse offset.
    var mousex = event.clientX - canvas.offsetLeft;
    var mousey = event.clientY - canvas.offsetTop;
    // Normalize wheel to +1 or -1.
    var wheel = event.deltaY < 0 ? 1 : -1;

    // Compute zoom factor.
    var zoom = Math.exp(wheel*zoomIntensity);
    
    // Translate so the visible origin is at the context's origin.
    context.translate(originx, originy);
  
    // Compute the new visible origin. Originally the mouse is at a
    // distance mouse/scale from the corner, we want the point under
    // the mouse to remain in the same place after the zoom, but this
    // is at mouse/new_scale away from the corner. Therefore we need to
    // shift the origin (coordinates of the corner) to account for this.
    originx -= mousex/(scale*zoom) - mousex/scale;
    originy -= mousey/(scale*zoom) - mousey/scale;
    
    // Scale it (centered around the origin due to the trasnslate above).
    context.scale(zoom, zoom);
    // Offset the visible origin to it's proper position.
    context.translate(-originx, -originy);

    // Update scale and others.
    scale *= zoom;
    visibleWidth = width / scale;
    visibleHeight = height / scale;
}

<canvas id="canvas" width="600" height="200"></canvas>

@Tatarize가 지적한 것처럼 키 는 줌 포인트 (마우스 포인터)가 줌 후 동일한 위치에 유지되도록 축 위치를 계산하는 것입니다.

원래 마우스는 mouse/scale모퉁이에서 mouse/new_scale멀리 떨어져 있기 때문에 마우스 아래의 점을 확대 / 축소 후에 같은 위치에 유지하려고하지만 모퉁이 에서 멀어집니다. 따라서 origin이를 설명하기 위해 (코너의 좌표) 를 이동해야합니다 .

originx -= mousex/(scale*zoom) - mousex/scale;
originy -= mousey/(scale*zoom) - mousey/scale;
scale *= zoom

그런 다음 나머지 코드는 크기 조정을 적용하고 그리기 컨텍스트로 변환하여 원점이 캔버스 모서리와 일치하도록해야합니다.

이것은 실제로 매우 어려운 문제 (수학적으로)이며 거의 같은 일을하고 있습니다. Stackoverflow에 대해 비슷한 질문을했지만 응답이 없지만 DocType (StackOverflow for HTML / CSS)에 게시되어 응답을 받았습니다. 그것을 확인하십시오 http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example

이 작업을 수행하는 jQuery 플러그인을 작성하는 중입니다 (CSS3 변환을 사용하는 Google지도 스타일 확대 / 축소). 마우스 커서 확대 / 축소 비트가 정상적으로 작동하지만 사용자가 Google지도에서와 같이 캔버스를 드래그하는 방법을 알아 내려고 노력하고 있습니다. 작동하면 여기에 코드를 게시하지만 위의 링크에서 마우스 확대 지점을 확인하십시오.

Canvas 컨텍스트에 스케일 및 변환 메소드가 있다는 것을 몰랐습니다. 예를 들어 CSS3을 사용하여 동일한 것을 달성 할 수 있습니다. jQuery를 사용하여 :

$('div.canvasContainer > canvas')
    .css('-moz-transform', 'scale(1) translate(0px, 0px)')
    .css('-webkit-transform', 'scale(1) translate(0px, 0px)')
    .css('-o-transform', 'scale(1) translate(0px, 0px)')
    .css('transform', 'scale(1) translate(0px, 0px)');

CSS3 transform-origin을 0, 0 (-moz-transform-origin : 0 0)으로 설정하십시오. CSS3 변환을 사용하면 무엇이든 확대 할 수 있습니다. 컨테이너 DIV가 오버플로로 설정되어 있는지 확인하십시오.

CSS3 변환을 사용하든 캔버스 자체의 스케일 및 변환 메소드를 사용 하느냐는 전적으로 사용자에게 달려 있지만 위 링크에서 계산을 확인하십시오.

업데이트 : Meh! 링크를 따라 가기보다는 여기에 코드를 게시하겠습니다.

$(document).ready(function()
{
    var scale = 1;  // scale of the image
    var xLast = 0;  // last x location on the screen
    var yLast = 0;  // last y location on the screen
    var xImage = 0; // last x location on the image
    var yImage = 0; // last y location on the image

    // if mousewheel is moved
    $("#mosaicContainer").mousewheel(function(e, delta)
    {
        // find current location on screen 
        var xScreen = e.pageX - $(this).offset().left;
        var yScreen = e.pageY - $(this).offset().top;

        // find current location on the image at the current scale
        xImage = xImage + ((xScreen - xLast) / scale);
        yImage = yImage + ((yScreen - yLast) / scale);

        // determine the new scale
        if (delta > 0)
        {
            scale *= 2;
        }
        else
        {
            scale /= 2;
        }
        scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);

        // determine the location on the screen at the new scale
        var xNew = (xScreen - xImage) / scale;
        var yNew = (yScreen - yImage) / scale;

        // save the current screen location
        xLast = xScreen;
        yLast = yScreen;

        // redraw
        $(this).find('div').css('-moz-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
                           .css('-moz-transform-origin', xImage + 'px ' + yImage + 'px')
        return false;
    });
});

물론 캔버스 스케일 및 변환 방법을 사용하도록 조정해야합니다.

업데이트 2 : 방금 변환 원점을 번역과 함께 사용하고 있음을 알았습니다. 스케일을 사용하고 자체적으로 번역하는 버전을 구현했습니다. http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html 이미지가 다운로드 될 때까지 기다렸다가 마우스 휠로 확대 / 축소하고 이미지를 드래그하여 패닝을 지원합니다. CSS3 변환을 사용하고 있지만 캔버스에 동일한 계산을 사용할 수 있어야합니다.

c ++를 사용 하여이 문제에 부딪 혔습니다. 아마도 OpenGL 매트릭스를 사용하여 시작하지 않았어야했을 것입니다 ... 어쨌든 원점이 왼쪽 상단 모서리 인 컨트롤을 사용하는 경우 팬 / 확대를 원한다면 Google지도와 같이 레이아웃은 다음과 같습니다 (알레그로를 이벤트 핸들러로 사용).

// initialize
double originx = 0; // or whatever its base offset is
double originy = 0; // or whatever its base offset is
double zoom = 1;

.
.
.

main(){

    // ...set up your window with whatever
    //  tool you want, load resources, etc

    .
    .
    .
    while (running){
        /* Pan */
        /* Left button scrolls. */
        if (mouse == 1) {
            // get the translation (in window coordinates)
            double scroll_x = event.mouse.dx; // (x2-x1) 
            double scroll_y = event.mouse.dy; // (y2-y1) 

            // Translate the origin of the element (in window coordinates)      
            originx += scroll_x;
            originy += scroll_y;
        }

        /* Zoom */ 
        /* Mouse wheel zooms */
        if (event.mouse.dz!=0){    
            // Get the position of the mouse with respect to 
            //  the origin of the map (or image or whatever).
            // Let us call these the map coordinates
            double mouse_x = event.mouse.x - originx;
            double mouse_y = event.mouse.y - originy;

            lastzoom = zoom;

            // your zoom function 
            zoom += event.mouse.dz * 0.3 * zoom;

            // Get the position of the mouse
            // in map coordinates after scaling
            double newx = mouse_x * (zoom/lastzoom);
            double newy = mouse_y * (zoom/lastzoom);

            // reverse the translation caused by scaling
            originx += mouse_x - newx;
            originy += mouse_y - newy;
        }
    }
}  

.
.
.

draw(originx,originy,zoom){
    // NOTE:The following is pseudocode
    //          the point is that this method applies so long as
    //          your object scales around its top-left corner
    //          when you multiply it by zoom without applying a translation.

    // draw your object by first scaling...
    object.width = object.width * zoom;
    object.height = object.height * zoom;

    //  then translating...
    object.X = originx;
    object.Y = originy; 
}

나는 Tatarize의 답변을 좋아 하지만 대안을 제공 할 것입니다. 이것은 사소한 선형 대수 문제이며, 내가 제시하는 방법은 이동, 확대 / 축소, 기울이기 등에서 잘 작동합니다. 즉, 이미지가 이미 변환 된 경우에는 잘 작동합니다.

행렬의 크기가 조절되면 크기는 (0, 0)입니다. 따라서 이미지가 있고 배율을 2 배로 조정하면 오른쪽 아래 점이 x와 y 방향으로 두 배가됩니다 ([0, 0]이 이미지의 왼쪽 상단이라는 규칙을 사용하여).

대신에 중심을 기준으로 이미지를 확대 / 축소하려는 경우 해결책은 다음과 같습니다. (1) 중심이 (0, 0)이되도록 이미지를 변환합니다. (2) 이미지를 x 및 y 팩터로 스케일링하고; (3) 이미지를 다시 번역하십시오. 즉

myMatrix
  .translate(image.width / 2, image.height / 2)    // 3
  .scale(xFactor, yFactor)                         // 2
  .translate(-image.width / 2, -image.height / 2); // 1

더 추상적으로, 동일한 전략이 어느 시점에서나 효과적입니다. 예를 들어 P 지점에서 이미지의 크기를 조정하려는 경우 :

myMatrix
  .translate(P.x, P.y)
  .scale(xFactor, yFactor)
  .translate(-P.x, -P.y);

마지막으로 이미지가 어떤 방식으로 이미 변형 된 경우 (예 : 회전, 기울이기, 변환 또는 크기 조정) 현재 변형을 유지해야합니다. 구체적으로, 위에서 정의 된 변환은 현재 변환에 의해 사후 곱셈 (또는 오른쪽 곱셈) 될 필요가있다.

myMatrix
  .translate(P.x, P.y)
  .scale(xFactor, yFactor)
  .translate(-P.x, -P.y)
  .multiply(myMatrix);

거기 있어요 다음은 이것을 실제로 보여주는 플 런크입니다. 점 위에서 마우스 휠로 스크롤하면 계속 고정되어 있음을 알 수 있습니다. (Chrome에서만 테스트되었습니다.) http://plnkr.co/edit/3aqsWHPLlSXJ9JCcJzgH?p=preview

다음은 중심 이미지에 대한 솔루션입니다.

var MIN_SCALE = 1;
var MAX_SCALE = 5;
var scale = MIN_SCALE;

var offsetX = 0;
var offsetY = 0;

var $image     = $('#myImage');
var $container = $('#container');

var areaWidth  = $container.width();
var areaHeight = $container.height();

$container.on('wheel', function(event) {
    event.preventDefault();
    var clientX = event.originalEvent.pageX - $container.offset().left;
    var clientY = event.originalEvent.pageY - $container.offset().top;

    var nextScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale - event.originalEvent.deltaY / 100));

    var percentXInCurrentBox = clientX / areaWidth;
    var percentYInCurrentBox = clientY / areaHeight;

    var currentBoxWidth  = areaWidth / scale;
    var currentBoxHeight = areaHeight / scale;

    var nextBoxWidth  = areaWidth / nextScale;
    var nextBoxHeight = areaHeight / nextScale;

    var deltaX = (nextBoxWidth - currentBoxWidth) * (percentXInCurrentBox - 0.5);
    var deltaY = (nextBoxHeight - currentBoxHeight) * (percentYInCurrentBox - 0.5);

    var nextOffsetX = offsetX - deltaX;
    var nextOffsetY = offsetY - deltaY;

    $image.css({
        transform : 'scale(' + nextScale + ')',
        left      : -1 * nextOffsetX * nextScale,
        right     : nextOffsetX * nextScale,
        top       : -1 * nextOffsetY * nextScale,
        bottom    : nextOffsetY * nextScale
    });

    offsetX = nextOffsetX;
    offsetY = nextOffsetY;
    scale   = nextScale;
});

body {
    background-color: orange;
}
#container {
    margin: 30px;
    width: 500px;
    height: 500px;
    background-color: white;
    position: relative;
    overflow: hidden;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container">
    <img id="myImage" src="http://s18.postimg.org/eplac6dbd/mountain.jpg">
</div>

다음은 scale () 및 translate () 대신 setTransform ()을 사용하는 다른 방법입니다. 모든 것이 동일한 객체에 저장됩니다. 캔버스는 페이지에서 0,0으로 가정되며, 그렇지 않으면 페이지 좌표에서 해당 위치를 빼야합니다.

this.zoomIn = function (pageX, pageY) {
    var zoomFactor = 1.1;
    this.scale = this.scale * zoomFactor;
    this.lastTranslation = {
        x: pageX - (pageX - this.lastTranslation.x) * zoomFactor,
        y: pageY - (pageY - this.lastTranslation.y) * zoomFactor
    };
    this.canvasContext.setTransform(this.scale, 0, 0, this.scale,
                                    this.lastTranslation.x,
                                    this.lastTranslation.y);
};
this.zoomOut = function (pageX, pageY) {
    var zoomFactor = 1.1;
    this.scale = this.scale / zoomFactor;
    this.lastTranslation = {
        x: pageX - (pageX - this.lastTranslation.x) / zoomFactor,
        y: pageY - (pageY - this.lastTranslation.y) / zoomFactor
    };
    this.canvasContext.setTransform(this.scale, 0, 0, this.scale,
                                    this.lastTranslation.x,
                                    this.lastTranslation.y);
};

패닝을 처리하기위한 코드 :

this.startPan = function (pageX, pageY) {
    this.startTranslation = {
        x: pageX - this.lastTranslation.x,
        y: pageY - this.lastTranslation.y
    };
};
this.continuePan = function (pageX, pageY) {
    var newTranslation = {x: pageX - this.startTranslation.x,
                          y: pageY - this.startTranslation.y};
    this.canvasContext.setTransform(this.scale, 0, 0, this.scale,
                                    newTranslation.x, newTranslation.y);
};
this.endPan = function (pageX, pageY) {
    this.lastTranslation = {
        x: pageX - this.startTranslation.x,
        y: pageY - this.startTranslation.y
    };
};

답을 직접 얻으려면 줌 전후에 동일한 페이지 좌표가 동일한 캔버스 좌표와 일치해야합니다. 그런 다음이 방정식에서 시작하여 대수를 할 수 있습니다.

(pageCoords-번역) / scale = canvasCoords

나는 그림을 따로 그리거나 움직이고있는 사람들을 위해 몇 가지 정보를 여기에 넣고 싶습니다.

줌 및 뷰포트 위치를 저장하려는 경우에 유용 할 수 있습니다.

서랍은 다음과 같습니다.

function redraw_ctx(){
   self.ctx.clearRect(0,0,canvas_width, canvas_height)
   self.ctx.save()
   self.ctx.scale(self.data.zoom, self.data.zoom) // 
   self.ctx.translate(self.data.position.left, self.data.position.top) // position second
   // Here We draw useful scene My task - image:
   self.ctx.drawImage(self.img ,0,0) // position 0,0 - we already prepared
   self.ctx.restore(); // Restore!!!
}

통지 규모가 먼저되어야 합니다.

그리고 여기 확대기가 있습니다 :

function zoom(zf, px, py){
    // zf - is a zoom factor, which in my case was one of (0.1, -0.1)
    // px, py coordinates - is point within canvas 
    // eg. px = evt.clientX - canvas.offset().left
    // py = evt.clientY - canvas.offset().top
    var z = self.data.zoom;
    var x = self.data.position.left;
    var y = self.data.position.top;

    var nz = z + zf; // getting new zoom
    var K = (z*z + z*zf) // putting some magic

    var nx = x - ( (px*zf) / K ); 
    var ny = y - ( (py*zf) / K);

    self.data.position.left = nx; // renew positions
    self.data.position.top = ny;   
    self.data.zoom = nz; // ... and zoom
    self.redraw_ctx(); // redraw context
    }

그리고 물론, 우리는 드래그가 필요합니다 :

this.my_cont.mousemove(function(evt){
    if (is_drag){
        var cur_pos = {x: evt.clientX - off.left,
                       y: evt.clientY - off.top}
        var diff = {x: cur_pos.x - old_pos.x,
                    y: cur_pos.y - old_pos.y}

        self.data.position.left += (diff.x / self.data.zoom);  // we want to move the point of cursor strictly
        self.data.position.top += (diff.y / self.data.zoom);

        old_pos = cur_pos;
        self.redraw_ctx();

    }


})

if(wheel > 0) {
    this.scale *= 1.1; 
    this.offsetX -= (mouseX - this.offsetX) * (1.1 - 1);
    this.offsetY -= (mouseY - this.offsetY) * (1.1 - 1);
}
else {
    this.scale *= 1/1.1; 
    this.offsetX -= (mouseX - this.offsetX) * (1/1.1 - 1);
    this.offsetY -= (mouseY - this.offsetY) * (1/1.1 - 1);
}

다음은 PIXI.js를 사용하여 @tatarize의 답변에 대한 코드 구현입니다. 매우 큰 이미지의 일부 (예 : Google지도 스타일)를보고있는 뷰포트가 있습니다.

$canvasContainer.on('wheel', function (ev) {

    var scaleDelta = 0.02;
    var currentScale = imageContainer.scale.x;
    var nextScale = currentScale + scaleDelta;

    var offsetX = -(mousePosOnImage.x * scaleDelta);
    var offsetY = -(mousePosOnImage.y * scaleDelta);

    imageContainer.position.x += offsetX;
    imageContainer.position.y += offsetY;

    imageContainer.scale.set(nextScale);

    renderer.render(stage);
});

• $canvasContainer 내 HTML 컨테이너입니다.
• imageContainer 이미지가있는 PIXI 컨테이너입니다.
• mousePosOnImage 뷰포트뿐만 아니라 전체 이미지에 대한 마우스 위치입니다.

마우스 위치를 얻는 방법은 다음과 같습니다.

  imageContainer.on('mousemove', _.bind(function(ev) {
    mousePosOnImage = ev.data.getLocalPosition(imageContainer);
    mousePosOnViewport.x = ev.data.originalEvent.offsetX;
    mousePosOnViewport.y = ev.data.originalEvent.offsetY;
  },self));

확대 / 축소 전후에 월드 공간 (화면 공간과 반대)에 점을 표시 한 다음 델타로 변환해야합니다.

mouse_world_position = to_world_position(mouse_screen_position);
zoom();
mouse_world_position_new = to_world_position(mouse_screen_position);
translation += mouse_world_position_new - mouse_world_position;

마우스 위치는 화면 공간에 있으므로 월드 공간으로 변환해야합니다. 간단한 변형은 다음과 유사해야합니다.

world_position = screen_position / scale - translation

scrollto (x, y) 함수를 사용하면 확대 / 축소 후 표시해야 할 지점까지 스크롤 막대의 위치를 ​​바로 처리 할 수 ​​있습니다. 마우스 사용 event.clientX 및 event.clientY의 위치를 ​​찾으십시오. 이것은 당신을 도울 것입니다

한 가지 중요한 점은 다음과 같은 것이 있다면 :

body {
  zoom: 0.9;
}

캔버스에서 동등한 것을 만들어야합니다.

canvas {
  zoom: 1.1;
}