利用createjs建立画板当鼠标按下的时候,开始描画此处加入鼠标按下事件: 当鼠标弹起的时候,结束描画此处需要加入鼠标弹起事件;在鼠标按下并且移动的时候 在鼠标经过的路径上画线, 此处需要加入鼠标一定事件; 加入按钮改变画笔颜色和线条宽度:加画布导出功能。
时间: 2023-06-14 14:02:26 浏览: 241
fabricjs画板工具与开源框架
好的,以下是利用createjs建立画板的代码和相应的事件处理函数:
```javascript
// 创建 canvas 元素
var canvas = document.getElementById("canvas");
// 创建 stage 元素
var stage = new createjs.Stage(canvas);
// 设置画笔颜色和线条宽度
var color = "#000000";
var thickness = 2;
// 创建一个形状对象
var shape = new createjs.Shape();
// 将形状添加到舞台上
stage.addChild(shape);
// 鼠标按下事件处理函数
function handleMouseDown(event) {
// 开始描画
shape.graphics.setStrokeStyle(thickness, 'round', 'round')
.beginStroke(color)
.moveTo(stage.mouseX, stage.mouseY);
stage.addEventListener("stagemousemove", handleMouseMove); // 添加鼠标移动事件
}
// 鼠标弹起事件处理函数
function handleMouseUp(event) {
// 结束描画
stage.removeEventListener("stagemousemove", handleMouseMove);
}
// 鼠标移动事件处理函数
function handleMouseMove(event) {
// 在鼠标经过的路径上画线
shape.graphics.lineTo(stage.mouseX, stage.mouseY);
stage.update();
}
// 改变画笔颜色和线条宽度的按钮事件处理函数
function handleButton(event) {
color = event.target.color;
thickness = event.target.thickness;
}
// 导出画布内容的按钮事件处理函数
function handleExport(event) {
var dataURL = canvas.toDataURL("image/png"); // 获取画布内容的 DataURL
window.open(dataURL); // 在新窗口中打开 DataURL
}
// 添加事件监听器
canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mouseup", handleMouseUp);
document.getElementById("btn-black").addEventListener("click", handleButton);
document.getElementById("btn-red").addEventListener("click", handleButton);
document.getElementById("btn-green").addEventListener("click", handleButton);
document.getElementById("btn-thick").addEventListener("click", handleButton);
document.getElementById("btn-thin").addEventListener("click", handleButton);
document.getElementById("btn-export").addEventListener("click", handleExport);
```
需要注意的是,以上代码中的 HTML 元素(如 canvas、按钮等)需要根据实际情况进行定义和布局。
阅读全文