用createjs做一个绘画房间,可以选择颜色吸色、选择画笔大小、在另外一个小屏可看到画板
时间: 2023-06-12 19:03:57 浏览: 165
好的,那我们可以按照以下步骤来实现:
1. 首先,我们需要在 HTML 页面中创建一个画布和一个小窗口用于预览。我们可以使用以下代码:
```html
<canvas id="canvas" width="600" height="400"></canvas>
<div id="preview"></div>
```
2. 接下来,我们需要在 JavaScript 中使用 CreateJS 库来创建画布和小窗口,并添加交互功能。我们可以使用以下代码:
```javascript
// 获取画布和预览窗口
var canvas = document.getElementById("canvas");
var preview = document.getElementById("preview");
// 创建舞台和画布对象
var stage = new createjs.Stage(canvas);
var drawingCanvas = new createjs.Shape();
// 设置画笔属性
drawingCanvas.graphics.setStrokeStyle(2, 'round', 'round');
drawingCanvas.graphics.beginStroke("#000000");
// 添加画布到舞台
stage.addChild(drawingCanvas);
// 创建预览窗口对象
var previewCanvas = new createjs.Shape();
var previewStage = new createjs.Stage(preview);
previewStage.addChild(previewCanvas);
// 添加颜色选择器和画笔大小选择器
var colorPicker = document.createElement("input");
colorPicker.type = "color";
colorPicker.addEventListener("change", function() {
drawingCanvas.graphics.beginStroke(colorPicker.value);
});
var brushSize = document.createElement("input");
brushSize.type = "range";
brushSize.min = "1";
brushSize.max = "10";
brushSize.value = "2";
brushSize.addEventListener("change", function() {
drawingCanvas.graphics.setStrokeStyle(brushSize.value, 'round', 'round');
});
// 添加吸色按钮
var eyedropper = document.createElement("button");
eyedropper.textContent = "吸色";
eyedropper.addEventListener("click", function() {
var data = drawingCanvas.graphics.getInstructions();
var last = data.length - 1;
var color = data[last].params[0];
colorPicker.value = color;
drawingCanvas.graphics.beginStroke(color);
});
// 添加颜色选择器、画笔大小选择器和吸色按钮到页面
document.body.appendChild(colorPicker);
document.body.appendChild(brushSize);
document.body.appendChild(eyedropper);
// 添加鼠标交互
drawingCanvas.addEventListener("pressmove", function(evt) {
drawingCanvas.graphics.lineTo(evt.stageX, evt.stageY);
drawingCanvas.graphics.moveTo(evt.stageX, evt.stageY);
stage.update();
// 更新预览窗口
previewCanvas.graphics.clear();
previewCanvas.graphics.beginStroke(colorPicker.value);
previewCanvas.graphics.setStrokeStyle(brushSize.value, 'round', 'round');
previewCanvas.graphics.lineTo(evt.stageX / 2, evt.stageY / 2);
previewCanvas.graphics.moveTo(evt.stageX / 2, evt.stageY / 2);
previewStage.update();
});
// 更新舞台
stage.update();
```
3. 最后,我们需要在 CSS 中设置预览窗口的样式,使其位于画布旁边。我们可以使用以下代码:
```css
#preview {
display: inline-block;
width: 150px;
height: 100px;
border: 1px solid black;
margin-left: 10px;
}
```
这样,一个可以选择颜色吸色、选择画笔大小、在另外一个小屏可看到画板的绘画房间就完成了!
阅读全文