Изображение, отображаемое внутри холста, исчезает, когда я рисую Ограничивающие прямоугольники? - PullRequest
Новая
       9

Изображение, отображаемое внутри холста, исчезает, когда я рисую Ограничивающие прямоугольники?

0 голосов
/ 12 января 2019

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

<body>
    <canvas id="canvas1" width="300" height="300"></canvas>

    <script>
        var canv = document.getElementById('canvas1'),
            ctx = canv.getContext('2d'),
            rect = {},
            drag = false;

        function draw() {
            ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
        }

        function mouseDown(e) {
            rect.startX = e.pageX - this.offsetLeft;
            rect.startY = e.pageY - this.offsetTop;
            drag = true;
        }

        function mouseUp() {
            drag = false;
        }

        function mouseMove(e) {
            if (drag) {
                rect.w = (e.pageX - this.offsetLeft) - rect.startX;
                rect.h = (e.pageY - this.offsetTop) - rect.startY ;
                ctx.clearRect(0, 0, canv.width, canv.height);
                draw();
            }
        }

        function init() {
            canv.addEventListener('mousedown', mouseDown, false);
            canv.addEventListener('mouseup', mouseUp, false);
            canv.addEventListener('mousemove', mouseMove, false);
        }

        function loadImage(canvas, context){
            var img = new Image();
            img.onload = function(){
                context.drawImage(img, 0, 0, img.width, img.height,
                                       0, 0, canvas.width, canvas.height );
            };
            img.src = "./Pics/img3.png";
        }

        init();
        loadImage(canv, ctx);

    </script>
</body>

ПРИМЕЧАНИЕ. Я рендеринг изображений, размеры которых (ширина и высота) превышают размеры холста

1 Ответ

0 голосов
/ 12 января 2019

Это то, что ваш код просит сделать, 

ctx.clearRect(0, 0, canv.width, canv.height); // This clears the canvas
draw();

Чтобы избежать этого, вам придется снова вызывать ctx.drawImage() из вашего draw() метода.

Но лучше всего будет подождать, пока ваше изображение загрузится, прежде чем запускать что-либо из вашего приложения, таким образом, img.onload будет отвечать за то, когда ресурсы будут готовы, и вы сможете использовать это изображение, так как инициализация вашего приложения для рисования. 

var canv = document.getElementById('canvas1'),
  ctx = canv.getContext('2d'),
  rect = {},
  drag = false,
  img = loadImage(init); // pass the init function as a callback

function loadImage(cb)  {
  var img = new Image();
  img.onload = cb;
  img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
  return img;
}

function draw() {
  ctx.clearRect(0, 0, canv.width, canv.height); // clear
  ctx.drawImage(img, -200, -100); // draw bg
  drawRect(); // draw rect
}

function drawRect() {
  ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
}

function mouseDown(e) {
  rect.startX = e.pageX - this.offsetLeft;
  rect.startY = e.pageY - this.offsetTop;
  drag = true;
}

function mouseUp() {
  drag = false;
}

function mouseMove(e) {
  if (drag) {
    rect.w = (e.pageX - this.offsetLeft) - rect.startX;
    rect.h = (e.pageY - this.offsetTop) - rect.startY;
    draw();
  }
}

function init() {
  canv.addEventListener('mousedown', mouseDown, false);
  canv.addEventListener('mouseup', mouseUp, false);
  canv.addEventListener('mousemove', mouseMove, false);
  draw();
}
<canvas id="canvas1" width="300" height="300"></canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...