javascript - canvas - 如何在图像上选择多矩形区域？

Question

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rect = {};
var drag = false;
make_base();
init();


function make_base() {
  base_image = new Image();
  base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0, 800, 500);
  }
}

function writeMessage(canvas, message) {
  var context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(base_image, 0, 0, 800, 500);
  context.font = '12pt Calibri';
  context.fillStyle = 'red';
  context.fillText(message, 25, 25);
}

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

function init() {

    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
}

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 ;
        context.clearRect(rect.startX, rect.startY, rect.w, rect.h);
        draw();
    }
}

function draw() {
    context.lineWidth="1";
    context.strokeStyle = "blue";
    context.beginPath();
    context.rect(rect.startX, rect.startY, rect.w, rect.h);
    context.stroke();
    context.closePath();
}

<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;">
    </canvas>

现在我可以使用鼠标在图像上绘制多矩形。然而，它会是白色的吗？

如何绘制更像选择区域的矩形？

Answer 1

最佳实践。

渲染

您永远不应该从鼠标或其他 UI 事件进行渲染，因为它们不会与显示器同步。这可能会导致令人不快的剪切和闪烁，还会导致可能只能部分看到或根本看不到的不必要的渲染，无缘无故地影响功率和电池生命周期。

如果您定期更新 DOM 中的元素(不仅仅是 Canvas )，请使用通过 requestAnimationFrame 调用的渲染循环。这可确保您只呈现可见的 DOM 内容。

丢失输入

当获取要拖动的鼠标输入时，您应该监听文档的鼠标事件而不是元素的。这允许您在元素和页面移动时跟随拖动的输入。如果您不这样做，则在用户拖动元素/页面并释放鼠标按钮时，拖动可能会被锁定。

其他两个答案都未能正确处理此问题。

常量和样式

尽可能使用常量 (const)。它们是 block 范围的，有助于减少错误(尽管这是有争议的)。

习惯于在代码的顶部添加 "use strict";，这将帮助您减少并尽早发现错误。不要在完成代码后添加 "use strict"，除非您进行了完整的测试周期，因为它会/可能会破坏曾经有效的代码。

虽然最佳实践没有定义命名风格，但它确实意味着您要始终如一地使用命名风格。如果您选择蛇形大小写 (snake_case)，则在整个代码中使用它，如果您选择驼峰大小写 (camelCase)，则仅使用它。您将变量作为单词记住，试图记住您对变量使用的样式会减慢您的速度并可能导致错误。

"use strict";
requestAnimationFrame(mainLoop);
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const storedRects = [];
const baseImage = loadImage("https://www.w3schools.com/css/img_fjords.jpg");
var refresh = true;
const rect = (() => {
    var x1, y1, x2, y2;
    var show = false;
    function fix() {
        rect.x = Math.min(x1, x2);
        rect.y = Math.min(y1, y2);
        rect.w = Math.max(x1, x2) - Math.min(x1, x2);
        rect.h = Math.max(y1, y2) - Math.min(y1, y2);
    }
    function draw(ctx) { ctx.strokeRect(this.x, this.y, this.w, this.h) }
    const rect = {x : 0, y : 0, w : 0, h : 0,  draw};
    const API = {
        restart(point) {
            x2 = x1 = point.x;
            y2 = y1 = point.y;
            fix();
            show = true;
        },
        update(point) {
            x2 = point.x;
            y2 = point.y;
            fix();
            show = true;
        },
        toRect() {
            show = false;
            return Object.assign({}, rect);
        },
        draw(ctx) {
            if (show) { rect.draw(ctx) }
        },
        show : false,
    }
    return API;
})();

function loadImage(url) {
    const image = new Image();
    image.src = url;
    image.onload = () => refresh = true;
    return image;
}

const mouse = {
    button : false,
    x : 0,
    y : 0,
    down : false,
    up : false,
    element : null,
    event(e) {
        const m = mouse;
        m.bounds = m.element.getBoundingClientRect();
        m.x = e.pageX - m.bounds.left - scrollX;
        m.y = e.pageY - m.bounds.top - scrollY;
        const prevButton = m.button;
        m.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
        if (!prevButton && m.button) { m.down = true }
        if (prevButton && !m.button) { m.up = true }
    },
    start(element) {
        mouse.element = element;
        "down,up,move".split(",").forEach(name => document.addEventListener("mouse" + name, mouse.event));
    }
}

mouse.start(canvas);
function draw() {
    ctx.drawImage(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.width);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "yellow";
    storedRects.forEach(rect => rect.draw(ctx));
    ctx.strokeStyle = "red";
    rect.draw(ctx);
}
function mainLoop() {
    if (refresh || mouse.down || mouse.up || mouse.button) {
        refresh = false;
        if (mouse.down) {
            mouse.down = false;
            rect.restart(mouse);
        } else if (mouse.button) {
            rect.update(mouse);
        } else if (mouse.up) {
            mouse.up = false;
            rect.update(mouse);
            storedRects.push(rect.toRect());
        }
        draw();
    }
    requestAnimationFrame(mainLoop)
}
   

<canvas id="myCanvas" width="800" height="500" title = "click and drag to add rectangles" style="border:1px solid #000000;cursor:crosshair"></canvas>