Увеличьте холст по отношению к мышиному сердцу - PullRequest
Новая
       3

Увеличьте холст по отношению к мышиному сердцу

0 голосов
/ 03 октября 2018

У меня очень простое приложение, на котором я отлично рисую изображение на холсте.Я переводю контекст с помощью image.width / 2, image.height / 2 и задаю точку назначения как -image.width / 2, -image.height / 2. 

        function draw() {
        window.canvas = document.getElementById('canvas');
        window.ctx = canvas.getContext('2d');
        window.image = document.createElement("img");
        image.onload = function() {
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.translate(image.width/2,image.height/2);
            ctx.drawImage(image,-image.width/2,-image.height/2);
        };
        image.src = 'rec.JPG';
    }

Это отображаетизображение, как это должно быть.Итак, учитывая эту концепцию, если я хочу сделать центральную точку изображения в центре холста, я должен сделать это, как я делал выше.Теперь я хочу, чтобы пользователь нажимал на холст, я получаю координаты мыши.Затем я хочу масштабировать это изображение и перерисовать холст так, чтобы пользователь мог видеть эту часть изображения в центре (увеличенная версия).Код выглядит следующим образом: 

        function zoom(evt) {
        var x = getMousePos(canvas, evt).x;
        var y = getMousePos(canvas, evt).y;
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.translate(x,y);
        ctx.scale(1.5, 1.5);
        ctx.drawImage(image,-x,-y);
    }

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }

Но я как-то не получаю правильных результатов.Я хочу увидеть регион, где пользователь нажал, а затем я снова хочу нажать, чтобы уменьшить масштаб, и это все.Я могу сделать более позднюю часть легко, но у меня проблемы с масштабированием идеального региона.Я видел похожие вопросы по stackoverflow, но они не отвечают моим требованиям.Это мой HTML и CSS: 

    <style>
    .container {
        height: 500px;
    }
    .container .image-container {
        height: 500px;
        width: 50%;
        overflow: auto;
        position: absolute;
        border: 1px solid;
    }

    img {
        display: none;
    }

    canvas {
        width: 100%;
    }
</style>
<body onload="draw()">
    <div class="container">
        <div class="image-container">
    <canvas
            id="canvas"
            onclick="zoom(event)"
    >
    </canvas>
   </div>
   </div>
</body>

PS: я не хочу панорамирование.Просто увеличивайте и уменьшайте клики.Вы можете играть с фрагментом. 

        function draw() {
            window.canvas = document.getElementById('canvas');
            window.ctx = canvas.getContext('2d');
            window.image = document.createElement("img");
            window.isZoom = false;
            image.onload = function() {
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.translate(image.width/2,image.height/2);
                ctx.drawImage(image,-image.width/2,-image.height/2);
            };
            image.src = 'https://d85ecz8votkqa.cloudfront.net/support/help_center/Print_Payment_Receipt.JPG';
        }

        function zoom(evt) {
            if(!isZoom) {
                var x = getMousePos(canvas, evt).x;
                var y = getMousePos(canvas, evt).y;
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.translate(x,y);
                ctx.scale(2, 2);
                ctx.drawImage(image,-x,-y);
                canvas.style.cursor = 'zoom-out';
                isZoom = true;
            } else {
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.translate(image.width/2,image.height/2);
                ctx.drawImage(image,-image.width/2,-image.height/2);
                isZoom=false;
                canvas.style.cursor = 'zoom-in';
            }
        }

        function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }
    <style>
        .container {
            height: 500px;
        }
        .container .image-container {
            height: 500px;
            width: 50%;
            overflow: auto;
            position: absolute;
            border: 1px solid;
        }

        img {
            display: none;
        }

        canvas {
            width: 100%;
            cursor: zoom-in;
        }
    </style>
<body onload="draw()">
<div class="container">
    <div class="image-container">
        <canvas
                id="canvas"
                onclick="zoom(event)"
        >
        </canvas>
    </div>
</div>
</body>

1 Ответ

0 голосов
/ 03 октября 2018

Вы где действительно близко, просто нужно смешать масштаб в вашем рисунке изображения 

function draw() {
  window.canvas = document.getElementById('canvas');
  window.ctx = canvas.getContext('2d');
  window.image = document.createElement("img");
  window.isZoom = false;
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0,0);
  };
  image.src = 'https://d85ecz8votkqa.cloudfront.net/support/help_center/Print_Payment_Receipt.JPG';
}

function zoom(evt) {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var scale = 2
  if (!isZoom) {
    var pos = getMousePos(canvas, evt);    
    ctx.scale(scale, scale);
    ctx.drawImage(image, -pos.x*scale*scale, -pos.y*scale*scale);
    canvas.style.cursor = 'zoom-out';
  } else {
    ctx.drawImage(image, 0, 0);
    canvas.style.cursor = 'zoom-in';
  }
  isZoom = !isZoom
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}
.container {
  height: 500px;
}

.container .image-container {
  height: 500px;
  width: 50%;
  overflow: auto;
  position: absolute;
  border: 1px solid;
}

img {
  display: none;
}

canvas {
  width: 100%;
  cursor: zoom-in;
}
<body onload="draw()">
  <div class="container">
    <div class="image-container">
      <canvas id="canvas" onclick="zoom(event)">
        </canvas>
    </div>
  </div>
</body>

Помимо добавления var scale я немного очистил ваш код: 

var x = getMousePos(canvas, evt).x;
var y = getMousePos(canvas, evt).y;

Это было что-то вродерасточительный двойной вызов getMousePos

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...