Drawing lines with opacity on a canvas with the mouse
Question
There's a question very similar to mine here . The reason I'm posting this is because half the question in the link was never answered. I'm at the point where the line is consistent all the way through, but you can't see what you're doing while drawing. The code went something like this:
canvas.addEventListener('mousedown', function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
ctx.stroke();
ctx.closePath();
}, false);
var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
};
This worked, except that I'm unable to see what I'm drawing. I've seen some people talking about using a temporary canvas to draw visibly on, then copy the strokes to the main canvas, but I haven't seen an example that actually worked.
1 answers
solution1
3 ACCPTED 2013-11-20 06:58:54
Here is code with kinetic.js :
Html :
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-16">
<script src="jquery-2.0.3.js" type="text/javascript"></script>
<script src="cn.js" type="text/javascript"></script>
<script src="kinetic.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<div id="container" height="300px" style="width:300px;height:300px;border:3px solid"></div>
</body>
</html>
cn.js :
$(function()
{
var lineSx,lineSy,lineFx,lineFy;
var ismouseDown=false;
var line;
var layerList=new Array();
setInterval(function(){// for clearing the temp layer
var l=null,topLayer;
var i=1;
l=layerList.pop();
while(l){
//console.log(l);
if(i!=1){
l.destroy();
l=null;
}
else{
topLayer=l;
}
l=layerList.pop();
i++;
}
layerList.push(topLayer);
},2);
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 0,
y: 0,
width: 300,
height: 300,
fill: 'black',
});
rect.on("mousedown",function(e){
console.log(e);
ismouseDown=true;
lineSx=e.clientX;
lineSy=e.clientY;
});
rect.on("mousemove",function(e){
if(ismouseDown){
console.log(e);
var cx=e.clientX;
var cy=e.clientY;
var tempLayer = new Kinetic.Layer();
//stage.remove(tempLayer);
line=createLine(lineSx,lineSy,cx,cy);
tempLayer.add(line);
stage.add(tempLayer);
layerList.push(tempLayer);
}
});
rect.on("mouseup",function(e){
ismouseDown=false;
console.log(e);
lineFx=e.clientX;
lineFy=e.clientY;
line=createLine(lineSx,lineSy,lineFx,lineFy);
layer.add(line);
stage.add(layer);
});
layer.add(rect);
stage.add(layer);
});
function createLine(sx,sy,fx,fy){
var line = new Kinetic.Line({
points: [sx,sy,fx,fy],
stroke: 'white',
strokeWidth: 3,
lineCap: 'round',
lineJoin: 'round'
});
return line;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.