Рисование нескольких рамок на холсте - PullRequest
Новая
       13

Рисование нескольких рамок на холсте

0 голосов
/ 24 сентября 2018

До того, как я отредактировал свой код, чтобы создать блоки как объекты и поместить их в массив, я мог нарисовать несколько блоков на холсте, и все они будут отображаться одновременно (пока я не очистил холст).Однако теперь на холсте одновременно отображается только один блок, а когда я рисую другой блок, предыдущий блок будет удален (хотя они все равно будут созданы как объект и помещены в массив).Как мне отредактировать мой код, чтобы я мог нарисовать несколько блоков на холсте и показать их все вместе, пока я не очистлю холст?

Код: 

const annotation = {
          xcoordi: 0,
          ycoordi: 0,
          width: 0,
          height: 0,
          printCoordinates: function () {
            console.log(`X: ${this.xcoordi}px, Y: ${this.ycoordi}px, Width: ${this.width}px, Height: ${this.height}px`);
          }
        };

//the array of all rectangles
let boundingBoxes = [];
// the actual rectangle, the one that is being drawn
let o={};


// a variable to store the mouse position
let m = {},
// a variable to store the point where you begin to draw the rectangle    
start = {};
// a boolean 
let isDrawing = false;

function handleMouseDown(e) {
  start = oMousePos(canvas2, e);
  isDrawing = true; 
  //console.log(start.x, start.y);
  canvas2.style.cursor = "crosshair";
}

function handleMouseMove(e) { 
    if(isDrawing){
    m = oMousePos(canvas2, e);
    draw();
    }
}

function handleMouseUp(e) { 
    canvas2.style.cursor = "default";
    isDrawing = false;

    const box = Object.create(annotation);
    box.xcoordi = o.x;
    box.ycoordi = o.y;
    box.width = o.w;
    box.height = o.h;

    boundingBoxes.push(box);
    draw();
    box.printCoordinates();
    console.log(boundingBoxes)
    }

function draw() {  
    o.x = start.x;  // start position of x
    o.y = start.y;  // start position of y
    o.w = m.x - start.x;  // width
    o.h = m.y - start.y;  // height

    clearcanvas();
    // draw all the rectangles saved in the rectsRy
    boundingBoxes.map(r => {drawRect(r)})
    // draw the actual rectangle
    drawRect(o);  
}

canvas2.addEventListener("mousedown", handleMouseDown);

canvas2.addEventListener("mousemove", handleMouseMove);

canvas2.addEventListener("mouseup", handleMouseUp);

function savecanvas(){
    context2.clearRect(0, 0, canvas2.width, canvas2.height);
    var savedBoxes = boundingBoxes.slice(0);
    console.log(savedBoxes); // ok
    }

function resetcanvas(){
    context2.clearRect(0, 0, canvas2.width, canvas2.height);
    boundingBoxes.length = 0;
    console.log(boundingBoxes); // ok
    }

function drawRect(o){
        context2.strokeStyle = "limegreen";
        context2.lineWidth = 2;
        context2.beginPath(o);
        context2.rect(o.x,o.y,o.w,o.h);
        context2.stroke();
    }

// Function to detect the mouse position

function oMousePos(canvas2, evt) {
  let ClientRect = canvas2.getBoundingClientRect();
    return { 
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
}

Любая помощьочень признателен, спасибо!

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

У вас есть 2 ошибки:

  1. в вашем коде вы используете clearcanvas ();функция, которая не определена.Я заменил его на context2.clearRect(0, 0, canvas2.width, canvas2.height);

  2. , и это более важно: объект, который вы сохраняете, имеет следующие свойства: xcoordi, ycoordi, width, height, НО в drawRect (o), который вы используете x, y, w, h чтобы нарисовать прямоугольник, но x, y, w, h не определены, и поэтому прямоугольник не нарисован.

Пожалуйста, проверьте мой код: 

const canvas2 = document.getElementById("canvas");
const context2 = canvas.getContext("2d");


const annotation = {
          x: 0,
          y: 0,
          w: 0,
          h: 0,
          printCoordinates: function () {
            console.log(`X: ${this.x}px, Y: ${this.y}px, Width: ${this.w}px, Height: ${this.h}px`);
          }
        };

//the array of all rectangles
let boundingBoxes = [];
// the actual rectangle, the one that is being drawn
let o={};


// a variable to store the mouse position
let m = {},
// a variable to store the point where you begin to draw the rectangle    
start = {};
// a boolean 
let isDrawing = false;

function handleMouseDown(e) {
  start = oMousePos(canvas2, e);
  isDrawing = true; 
  //console.log(start.x, start.y);
  canvas2.style.cursor = "crosshair";
}

function handleMouseMove(e) { 
    if(isDrawing){
    m = oMousePos(canvas2, e);
    draw();
    }
}

function handleMouseUp(e) { 
    canvas2.style.cursor = "default";
    isDrawing = false;

    const box = Object.create(annotation);
    box.x = o.x;
    box.y = o.y;
    box.w = o.w;
    box.h = o.h;

    boundingBoxes.push(box);
    draw();
    box.printCoordinates();
    console.log(boundingBoxes)
    }

function draw() {  
    o.x = start.x;  // start position of x
    o.y = start.y;  // start position of y
    o.w = m.x - start.x;  // width
    o.h = m.y - start.y;  // height

    //clearcanvas();
    context2.clearRect(0, 0, canvas2.width, canvas2.height);//////***********
    // draw all the rectangles saved in the rectsRy
    boundingBoxes.map(r => {drawRect(r)})
    // draw the actual rectangle
    drawRect(o);  
}

canvas2.addEventListener("mousedown", handleMouseDown);

canvas2.addEventListener("mousemove", handleMouseMove);

canvas2.addEventListener("mouseup", handleMouseUp);

function savecanvas(){
    context2.clearRect(0, 0, canvas2.width, canvas2.height);
    var savedBoxes = boundingBoxes.slice(0);
    console.log(savedBoxes); // ok
    }

function resetcanvas(){
    context2.clearRect(0, 0, canvas2.width, canvas2.height);
    boundingBoxes.length = 0;
    console.log(boundingBoxes); // ok
    }

function drawRect(o){
        context2.strokeStyle = "limegreen";
        context2.lineWidth = 2;
        context2.beginPath(o);
        context2.rect(o.x,o.y,o.w,o.h);
        context2.stroke();
    }

// Function to detect the mouse position

function oMousePos(canvas2, evt) {
  let ClientRect = canvas2.getBoundingClientRect();
    return { 
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
}
canvas{border:1px solid;}
<canvas id="canvas"></canvas>
0 голосов
/ 24 сентября 2018 

void function() {

  "use strict";
  
  // Variables
  var canvasWidth = 180;
  var canvasHeight = 160;
  var canvas = null;
  var ctx = null;
  var rectangles = [];
  var isDrawing = false;
  var mouseStartX = 0.0;
  var mouseStartY = 0.0;
  var mouseEndX = 0.0;
  var mouseEndY = 0.0;
  
  // Functions
  
  // Constructor function (called with 'new')
  function Rectangle(x,y,width,height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  }
  
  function draw() {
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,canvasWidth,canvasHeight);
  
    ctx.strokeStyle = "limegreen";
    ctx.lineWidth = 2;
    ctx.beginPath();
    
    for (var i = 0; i < rectangles.length; ++i) {
      var rectangle = rectangles[i];
      
      ctx.rect(
        rectangle.x,
        rectangle.y,
        rectangle.width,
        rectangle.height
      );
    }
    
    ctx.stroke();
  }
  
  function getMousePosition(e) {
    if (canvas && e) {
      var bounds = canvas.getBoundingClientRect();
      
      return [
        e.clientX - bounds.left,
        e.clientY - bounds.top
      ];
    } else {
      return [
        0.0,
        0.0
      ];
    }
  }
  
  // Event Handlers
  window.onmousedown = function(e) {
    if (!isDrawing) {
      isDrawing = true;
    
      // Destructuring Assignment
      [mouseStartX,mouseStartY] = getMousePosition(e);
      
      canvas.style.cursor = "crosshair";
    }
  }
  
  window.onmouseup = function(e) {
    if (isDrawing) {
      isDrawing = false;
      
      // Destructuring Assignment
     [mouseEndX,mouseEndY] = getMousePosition(e);
     
     rectangles.push(
      new Rectangle(
        mouseStartX,
        mouseStartY,
        mouseEndX - mouseStartX,
        mouseEndY - mouseStartY
      )
     );
     
     draw();
     
     canvas.style.cursor = "default";
    }
  }
  
  window.onmousemove = function(e) {
    if (isDrawing) {
     // Destructuring Assignment
     [mouseEndX,mouseEndY] = getMousePosition(e);
      
      draw();
      
      ctx.strokeStyle = "darkred";
      ctx.lineWidth = 2;
      ctx.beginPath();
      
      ctx.rect(
        mouseStartX,
        mouseStartY,
        mouseEndX - mouseStartX,
        mouseEndY - mouseStartY
      );
      
      ctx.stroke();
    }
  }
  
  // Runs when the page loads
  window.onload = function() {
    canvas = document.getElementById("canvas");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    
    ctx = canvas.getContext("2d");
    
    draw();
  }
  
}();
canvas {
  display: block;
  margin: auto;
  border: solid 2px black;
  border-radius: 10px;
}
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>
...