Draw Canvas Paint and Paintbrush
When your mousemove handler detects a elevate distance greater than the size of a rect, yous need to draw multiple rects to cover the entire dragged distance.
Here's what to do during each mousemove:
- Calculate how far the mouse moved during the drag.
- Calculate how many rects are needed to encompass that "drag-line".
- Depict multiple rects all along the drag-line using linear interpolation.
In the illustration below, I dragged the lesser of the T very chop-chop.
Notice that the code filled in all parts of the drag-line with multiple rects.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/D332T/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <style> #canvas{ border:solid 1px #ccc; margin-top: 0px; width:350px; tiptop:350px; } </fashion> <script> $(function(){ var stage = new Kinetic.Phase({ container:'canvass', width:350, top:350 }); var layer = new Kinetic.Layer(); phase.add(layer); var painting = fake ; var lineThickness = five ; var startX,startY; $(stage.getContent()).on('mousedown', part (upshot) { var pos=stage.getMousePosition(); startX=parseInt(pos.x); startY=parseInt(pos.y); painting = true; }); $(stage.getContent()).on('mousemove', function (issue) { if(!painting){return;} var pos=stage.getMousePosition(); var mouseX=parseInt(pos.x); var mouseY=parseInt(pos.y); var dx=mouseX-startX; var dy=mouseY-startY; var rectCount=Math.sqrt(dx*dx+dy*dy)/lineThickness; if(rectCount<=ane){ rect = new Kinetic.Rect({ ten:mouseX, y:mouseY, width:lineThickness, height:lineThickness, fill:'black', stroke: 'black', strokeWidth: lineThickness, lineJoin: 'circular', lineCap: 'round' }); layer.add(rect); }else{ for(var i=0;i<rectCount;i++){ // calc an XY betwixt starting & ending elevate points var nextX=startX+dx*i/rectCount; var nextY=startY+dy*i/rectCount; // add a rect at the calculated XY rect = new Kinetic.Rect({ ten:nextX, y:nextY, width:lineThickness, summit:lineThickness, fill:'red', stroke: 'black', strokeWidth: lineThickness, lineJoin: 'round', lineCap: 'round' }); layer.add(rect); } } layer.draw(); startX=mouseX; startY=mouseY; }); $(stage.getContent()).on('mouseup', office (event) { startX=nada; startY=null; painting = false; }); $(stage.getContent()).on('mouseout', office (result) { startX=null; startY=zippo; painting = false; }); }); // end $(function(){}); </script> </head> <body> <div id="sheet"></div> </body> </html> [ Improver based on OP's need for more speed ]
Alternatively, in that location'south a faster and more than efficient "sketching" alternative:
The efficiency is that y'all draw a single polyline instead of many rectangles to cover a elevate-line.
Here's a Fiddle: http://jsfiddle.cyberspace/m1erickson/CCqhg/
Here's lawmaking to sketch with a polyline:
In mousedown: create a new polyline starting at the mousedown coordinate
// a flag nosotros use to meet if we're dragging the mouse var isMouseDown=false; // a reference to the line we are currently drawing var newline; // a reference to the assortment of points making newline var points=[]; // On mousedown // Set up the isMouseDown flag to true // Create a new line, // Clear the points array for new points // set newline reference to the newly created line role onMousedown(consequence) { isMouseDown = true; points=[]; points.push(phase.getMousePosition()); var line = new Kinetic.Line({ points: points, stroke: "green", strokeWidth: 5, lineCap: 'round', lineJoin: 'circular' }); layer.add(line); newline=line; } In mousemove: add a segment to that line reaching to thecurrent mouse coordinate.
// on mousemove // Add together the electric current mouse position to the points[] array // Update newline to include all points in points[] // and redraw the layer function onMousemove(event) { if(!isMouseDown){return;}; points.push button(stage.getMousePosition()); newline.setPoints(points); // use layer.drawScene // This avoids unnecessarily updating the striking canva layer.drawScene(); } Source: https://stackoverflow.com/questions/19326365/paint-brush-on-html5-canvas-with-kineticjs-inconsistent
0 Response to "Draw Canvas Paint and Paintbrush"
Post a Comment