Question

我正在尝试使用下拉菜单使用Canvas在绘图程序中将画笔的形状从圆形更改为方形。

这是我在这个小提琴中的目标。

  var tool = false;
var toolDefault = 'rect';

var toolSelect = document.getElementById('dtool');

我不知道该怎么做。任何例子都会有所帮助。

我试过四处寻找但没有运气。

Answer 1

为每种铅笔类型定义一个函数，例如：

function setRound() {
  ctx.lineWidth = 5;
  ctx.lineCap = 'round';
  ctx.lineJoin = "round";
  ctx.strokeStyle = '#2b39c0';
}

function setSquare() {
  ctx.lineWidth = 5;
  ctx.lineCap = 'butt';
  ctx.lineJoin = "miter";
  ctx.strokeStyle = '#c0392b';
}

您还必须从鼠标处理程序中删除设置笔触样式（请参阅调整大小以添加调整大小处理程序以及下面使用的currentTool声明。）

（如果您有许多不同的样式，我建议至少考虑一个数组和自定义笔对象。）

然后在触发工具选择器上的事件时使用开关选择器：

toolSelect.addEventListener('change', setPencil);
...

function setPencil() {
  switch(this.value) {
    case "rect": 
        currentTool = setSquare; break;
    case "pencil": 
        currentTool = setRound; break;
  }
  currentTool();
}

现在铅笔将根据菜单中选定的铅笔进行更新。

此外，需要更正鼠标位置 - 只需添加此项即可进行调整：

function setPosition(e) {
  var rect = canvas.getBoundingClientRect();
  pos.x = e.clientX - rect.left;
  pos.y = e.clientY - rect.top;
}

<强> Updated fiddle

我有一种小小的感觉，你可能会问如何画一个矩形而不是一个方形的尖线。如果是，请查看 this answer 。

Answer 2

我使用onchange属性来运行一个函数来改变画笔的类型。到目前为止，画笔没有矩形形状。请参阅here。

注意：您的代码需要进行其他改进。例如，绘图发生在远离光标的位置。在点击并移动浏览器时，默认情况下会尝试拖动内容。所以我想你必须用mousemove在画布上添加event.preventDefault()函数。

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var toolSelect = document.getElementById('dtool');


var brush = {};
brush.shape = 'round';
brush.size = 1;

function setBrush(type) {
  switch (type) {
    case 'pencil':
      brush.shape = 'round';
      brush.size = 1;
      break;
    case 'square':
      brush.shape = 'square';
      brush.size = 10;
      break;
  }
}


// some hotfixes... ( ≖_≖)
document.body.style.margin = 0;
canvas.style.position = 'fixed';

// get canvas 2D context and set him correct size
var ctx = canvas.getContext('2d');
resize();

// last known position
var pos = {
  x: 0,
  y: 0
};

window.addEventListener('resize', resize);
document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition);
document.addEventListener('mouseenter', setPosition);

// new position from mouse event
function setPosition(e) {
  pos.x = e.clientX;
  pos.y = e.clientY;
}



// resize canvas
function resize() {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
}

function draw(e) {
  // mouse left button must be pressed
  if (e.buttons !== 1) return;

  ctx.beginPath(); // begin

  ctx.lineWidth = brush.size;
  ctx.lineCap = brush.shape;
  ctx.strokeStyle = '#c0392b';

  ctx.moveTo(pos.x, pos.y); // from
  setPosition(e);
  ctx.lineTo(pos.x, pos.y); // to

  ctx.stroke(); // draw it!
}

<label>Drawing tool:
  <select id="dtool" onchange="setBrush(this.value)">
    <option value="">Select</option>
    <option value="square">Square</option>
    <option value="pencil">Pencil</option>
  </select>
</label>

在Canvas Paint Program中添加向下菜单以更改画笔的形状？

2 个答案: