javascript - Canvas fix drawing points -
i have create drawing canvas. in javascript. when move mouse fast haven't full line line points. have used arc dont know of there better option painting line
how can fix ??
already thanks
<script type="application/javascript" src="jquery.js"></script> <script> var canvas; var ctx; var startdraw = false; var dikte = 7; $(document).ready(doinit()); function doinit() { canvas = document.getelementbyid("canvas"); ctx = canvas.getcontext('2d'); $(".kleur").on('click',dokleur); $("canvas").on('mouseup',doup); $("canvas").on('mousedown',dodown); $("canvas").on('mousemove',domove) $("#dikte").on('change',dodikte); $(".clear").on('click',clear); } function dodikte(){ dikte = this.value; } function clear(){ ctx.clearrect(0,0,canvas.width,canvas.height); } function dokleur(){ ctx.fillstyle = this.id; } function dodown() { startdraw = true; } function doup() { startdraw = false; } function dodot(x,y) { ctx.beginpath(); ctx.arc(x, y, dikte, 0, math.pi * 2, false); ctx.closepath(); ctx.fill(); } function domove(event) { if(startdraw) { dodot(event.offsetx, event.offsety) } } </script><style> canvas { border: solid 5px red; border-radius: 15px; } </style><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <canvas id="canvas" width="1000" height="650"></canvas> <input class="kleur" type="button" id="blue" value="blauw"> <input class="kleur" type="button" id="green" value="groen"> <input class="kleur" type="button" id="red" value="rood"> <input class="kleur" type="button" id="black" value="zwart"> <input class="kleur" type="button" id="orange" value="oranje"> <input type="button" class="clear" value="clear"> <input type="range" id="dikte" min="1" max="35" value="7"> </body> </html>
you need check when mouse has been clicked, being held, when released, or quick click. need draw line segments when mouse being dragged, or point if quick click.
i prefer bundle mouse events 1 function , create abstract mouse object use whatever needs have.
when handle mouse event, move or click, whatever last thing save button state. means next time mouse event called know checking last , current mouse button state if button clicked, being held, or up. may mousedown , mouseup events already, , yes , there no reason not use them. find easier in long run, can manipulate mouse state.
so when mouse first goes down, record coordinates, when mouse moves, draw line last coordinate new one. when mouse button goes quick check see if point draw , draw if so, else nothing.
here example. mouse code @ bottom mouse.buttonraw being bit field of current mouse button state first bit left, second middle, , third right.
var mouse; document.body.innerhtml = "use mouse draw on snippet."; var demo = function(){ var canvas = (function(){ var canvas = document.getelementbyid("canv"); if(canvas !== null){ document.body.removechild(canvas); } // creates blank image 2d context canvas = document.createelement("canvas"); canvas.id = "canv"; canvas.width = window.innerwidth; canvas.height = window.innerheight; canvas.style.position = "absolute"; canvas.style.top = "0px"; canvas.style.left = "0px"; canvas.style.zindex = 1000; canvas.ctx = canvas.getcontext("2d"); document.body.appendchild(canvas); return canvas; })(); var ctx = canvas.ctx; if(mouse !== undefined){ // if mouse exists mouse.removemouse(); // remove previous events } var canvasmousecallback = undefined; // if needed // mouse handler has more functionality needed lazy clean atm mouse = (function(){ var mouse = { x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false, interfaceid : 0, buttonlastraw : 0, buttonraw : 0, on : false, // mouse on element bm : [1, 2, 4, 6, 5, 3], // masks setting , clearing button raw bits; getinterfaceid : function () { return this.interfaceid++; }, // ui functions startmouse:undefined, mouseevents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,dommousescroll".split(",") }; function mousemove(e) { var t = e.type, m = mouse; m.x = e.offsetx; m.y = e.offsety; if (m.x === undefined) { m.x = e.clientx; m.y = e.clienty; } m.alt = e.altkey; m.shift = e.shiftkey; m.ctrl = e.ctrlkey; if (t === "mousedown") { m.buttonraw |= m.bm[e.which-1]; } else if (t === "mouseup") { m.buttonraw &= m.bm[e.which + 2]; } else if (t === "mouseout") { m.buttonraw = 0; m.over = false; } else if (t === "mouseover") { m.over = true; } else if (t === "mousewheel") { m.w = e.wheeldelta; } else if (t === "dommousescroll") { m.w = -e.detail;} // call mouse callback if set if (canvasmousecallback) { canvasmousecallback(mouse); } e.preventdefault(); } // function add events element function startmouse(element){ if(element === undefined){ element = document; } mouse.element = element; mouse.mouseevents.foreach( function(n){ element.addeventlistener(n, mousemove); } ); element.addeventlistener("contextmenu", function (e) {e.preventdefault();}, false); } // function remove events mouse.removemouse = function(){ if(mouse.element !== undefined){ mouse.mouseevents.foreach( function(n){ mouse.element.removeeventlistener(n, mousemove); } ); canvasmousecallback = undefined; } } mouse.mousestart = startmouse; return mouse; })(); // if there canvas add mouse event else add document if(typeof canvas !== "undefined"){ mouse.mousestart(canvas); }else{ mouse.mousestart(); } // previouse mouse state var lastmousebutton = 0; var x,y,xx,yy; //for saving line segments drawn // set drawing ctx.fillstyle = "red"; ctx.strokestyle = "red"; ctx.linewidth = 10; ctx.linejoin = "round"; ctx.linecap = "round"; // set mouse callback function. called every mouse event canvasmousecallback = function(mouse){ // first (left) button down , last button state up? if((mouse.buttonraw & 1) === 1 && (lastmousebutton & 1) === 0){ x = mouse.x; // save mouse coordinates y = mouse.y; }else // both mouse button down , last 1 down if((mouse.buttonraw & 1) === 1 && (lastmousebutton & 1) === 1){ xx = x; // yes move last coordinate yy = y; // start of line segment x = mouse.x; // mouse coords end of line seg y = mouse.y; ctx.beginpath(); // draw line segment ctx.moveto(x,y); ctx.lineto(xx,yy); ctx.stroke(); }else // has mouse been released if( (mouse.buttonraw & 1) === 0 && (lastmousebutton & 1) === 1){ if(xx === undefined){ // if xx undefined no line segment // has been drawn need ad point ctx.beginpath(); // draw point @ last mouse point ctx.arc(x,y,5,0,math.pi*2); ctx.fill(); } xx = undefined; // clear line segment start } // save last mouse start lastmousebutton = mouse.buttonraw; } } // resize demo fit window if needed window.addeventlistener("resize",demo); // start demo demo();you may interested in answer deals drawing demonstrates how smooth line being draw mouse input can dirty. smooth line
Comments
Post a Comment