javascript - 使用(鼠标+其他键)绘制线条

Question

我是 javascript 和 canvas 的新手。我使用以下代码在拖动鼠标时画一条线。我试图在原始版本中添加另一个绘图选项，同时用其他键(例如鼠标 + p)拖动鼠标，但我不明白如何添加。所以基本上有两种绘图选项:1)鼠标拖动一种颜色“绿色”2)键“P”+鼠标拖动另一种颜色“红色”。我在不同的网站上搜索了很多，但到处的选项都是“鼠标:向下”、“鼠标:移动”、“鼠标:向上”。

function makeBackgroundDrawingFabricCanvas(myCanvasObj, appendToCol) {
    let canvas_id = myCanvasObj.id
    let canvas_html = $("<canvas>")        
    $(canvas_html).attr("id", canvas_id)
    $(canvas_html).attr("height", canvas_height)
    $(canvas_html).attr("width", canvas_width)
    $(appendToCol).append(canvas_html) 
    var canvas = new fabric.Canvas(canvas_id);
    canvas.isDrawingMode = true
    canvas.freeDrawingBrush.color = "green";
    canvas.freeDrawingBrush.width = 10;
    let add_back_detail_button = $("<button class='btn btn-primary'>Add Back Detail</button>")
    $(appendToCol).append(add_back_detail_button)
    $(add_back_detail_button).click(function(){ 
        somefunction(canvas_3_add, obj, canvas4_id, obj.image.original_image)
    })
}

如果您指出我在代码中添加该选项的位置，这将是一个很大的帮助。

Answer 1

添加以下代码

document.addEventListener("keydown", event => {
  if (event.key === "p") {
    canvas.freeDrawingBrush.color = "red";
  }
});
document.addEventListener("keyup", event => {
  if (event.key === "p") {
    canvas.freeDrawingBrush.color = "green";
  }
});