画到帆布就像在油漆 [英] Drawing to canvas like in paint
问题描述
我有三个arrys：
clickX = [],
clickY = [],
clickDrag = [];
这是您点击后会发生什么：
this is what happens when you click down:
$('#canvasCursor').mousedown(function (e) {
console.log('down');
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
这里它将点击添加到数组并绘制：
here it adds the clicks to the array and draws.:
function redraw（）{
ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）; //清除画布
function redraw() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Clears the canvas
ctx.strokeStyle = "green";
ctx.lineJoin = "round";
ctx.lineWidth = brushSize*2;
for (var i = 0; i < clickX.length; i++) {
ctx.beginPath();
if (clickDrag[i] && i) {
ctx.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
ctx.moveTo(clickX[i] - 1, clickY[i]);
}
ctx.lineTo(clickX[i], clickY[i]);
ctx.closePath();
ctx.stroke();
}
}
我试图摆脱数组方式现在做它，因为当我使用滑块动态改变var brushSize它重新绘制整个图片在新的大小，而不是当时的大小。我不知道如何保存数组中任何特定对象的大小，然后绘制它们分开。
I am trying to get rid of the array way of doing it now because when I change the var brushSize dynamically using a slider it redraws the entire picture in the new size not the size they had at the time. I don't know how to save the size of any specific object in the array and then paint them seperate.
我不介意，如果我不能实现撤消功能这种方式给了我只要我能修复刷大小的变化。在这里你可以看到我在漫游的事！ http://www.taffatech.com/Paint.html
I don't mind if I cant implement the undo function that this way gives me as long as I can fix the change of brush size. Here you can see what I am rambling on about! http://www.taffatech.com/Paint.html
- 因为它从一个数组中绘制，所以似乎很慢，我猜测它。
-also it seems slower and im guessing its because its drawing from an array
推荐答案
如果您想要一个撤消功能，最好的选择是记录用户绘制的所有线段。
If you want an undo feature, your best option is to record all line segments drawn by the user.
这是使用包含用户绘制的所有点（折线）的点数组。
This is done with a point array that contains all points (polylines) drawn by the user.
跟踪画笔大小和画笔颜色，您还需要在数组中包含此信息。
To track the brush size and brush color, you need to include this info in your array also.
因此，数组的每个元素都将有关于每个线段的信息：
So each element of the the array will have this info about each line segment:
- x：此线段的结束x坐标
- y：结束y坐标
- size：画笔大小（lineWidth）
- color：画笔颜色（strokeStyle） begin表示新行的开始，end表示此行的结束。
- x: the ending x coordinate of this line segment
- y: the ending y coordinate
- size: the brush size (lineWidth)
- color: the brush color (strokeStyle)
- mode: "begin" indicates the beginning of a new line, "end" indicates the end of this line.
工作？
当用户拖动绘制线段时，每个mousemove事件都使用 context.lineTo 和 context.stroke 。
When the user is drag-drawing a line segment, each mousemove event is extending the current segment with context.lineTo and context.stroke.
当用户选择一个新的BrushSize或BrushColor， context.beginPath启动 context.beginPath 。
When the user selects a new BrushSize or BrushColor, context.beginPath starts context.beginPath.
当用户按住Undo按钮时，最后一个线段被弹出点阵列。然后重绘所有存活的线段。
When the user holds down the Undo button, the last point in the last line segment is popped off the point array. Then all the surviving line segments are redrawn. The undo button fires every 1/10th of a second when held down.
这里是代码和小提琴： http://jsfiddle.net/m1erickson/AEYYq/
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/AEYYq/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var lastX;
var lastY;
var mouseX;
var mouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;
var brushSize=20;
var brushColor="#ff0000";
var points=[];
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
ctx.beginPath();
if(ctx.lineWidth!=brushSize){ctx.lineWidth=brushSize;}
if(ctx.strokeStyle!=brushColor){ctx.strokeStyle=brushColor;}
ctx.moveTo(mouseX,mouseY);
points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"begin"});
lastX=mouseX;
lastY=mouseY;
isMouseDown=true;
}
function handleMouseUp(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
isMouseDown=false;
points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"end"});
}
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
if(isMouseDown){
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
lastX=mouseX;
lastY=mouseY;
// command pattern stuff
points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"draw"});
}
}
function redrawAll(){
if(points.length==0){return;}
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<points.length;i++){
var pt=points[i];
var begin=false;
if(ctx.lineWidth!=pt.size){
ctx.lineWidth=pt.size;
begin=true;
}
if(ctx.strokeStyle!=pt.color){
ctx.strokeStyle=pt.color;
begin=true;
}
if(pt.mode=="begin" || begin){
ctx.beginPath();
ctx.moveTo(pt.x,pt.y);
}
ctx.lineTo(pt.x,pt.y);
if(pt.mode=="end" || (i==points.length-1)){
ctx.stroke();
}
}
ctx.stroke();
}
function undoLast(){
points.pop();
redrawAll();
}
ctx.lineJoin = "round";
ctx.fillStyle=brushColor;
ctx.lineWidth=brushSize;
$("#brush5").click(function(){ brushSize=5; });
$("#brush10").click(function(){ brushSize=10; });
// Important! Brush colors must be defined in 6-digit hex format only
$("#brushRed").click(function(){ brushColor="#ff0000"; });
$("#brushBlue").click(function(){ brushColor="#0000ff"; });
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
// hold down the undo button to erase the last line segment
var interval;
$("#undo").mousedown(function() {
interval = setInterval(undoLast, 100);
}).mouseup(function() {
clearInterval(interval);
});
}); // end $(function(){});
</script>
</head>
<body>
<p>Drag to draw. Use buttons to change lineWidth/color</p>
<canvas id="canvas" width=300 height=300></canvas><br>
<button id="undo">Hold this button down to Undo</button><br><br>
<button id="brush5">5px Brush</button>
<button id="brush10">10px Brush</button>
<button id="brushRed">Red Brush</button>
<button id="brushBlue">Blue Brush</button>
</body>
</html>
这篇关于画到帆布就像在油漆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
