Databases
StackOverflow2013
Postsdbo
POremove a previous stroke (make a temporary line) - Javascript / HTML5
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POremove a previous stroke (make a temporary line) - Javascript / HTML5
    primarykey
    data
    text
    <p>I am trying to make a simple paint application and I want the lines to sort of preview the line after you specify a lines start point. The corresponding javascript is like this:</p> <pre><code>var Edges = new Array(); var Vertecies = new Array(); var Mouse = {x:0, y:0} function findPos(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } return undefined; } function addEdge() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var i=0; var Start = { x:0, y:0} var End = { x:0, y:0} var Line = (Start, End); var temp = new Array(); $("#myCanvas").mousemove(function(e){ console.log("mouse is movin!"); if(i==1) { var pos = findPos(this); console.log("I = 1 AHHHH") ctx.moveTo(Start.x, Start.y); ctx.lineTo(e.clientX-pos.x, e.clientY-pos.y); ctx.stroke(); } else{ } }) $("#myCanvas").click(function(event){ var pos = findPos(this); var x = event.pageX - pos.x; var y = event.pageY - pos.y; if (i==0) { Start = {x:x,y:y} i++; } else if(i==1) { End = {x:x,y:y} ctx.moveTo(Start.x , Start.y); ctx.lineTo(End.x , End.y); ctx.stroke(); Line = (Start, End); Edges.push(Line); i++; } while(i==2) { Start = {x:0, y:0}; End = {x:0, y:0}; i=0; } }); }; </code></pre> <p>Apart from that, I have a related canvas called myCanvas.</p> <p>Basically what it does is it makes lines going from that point to my cursor until I click again, then it will stop and now I'm left with just this mound of lines.</p> <p>How can i get a "temporary" line after I've clicked once going from that clicked location to my cursor and then place a permanent line where my second click is.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USFunkyguy
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POremove a previous stroke (make a temporary line) - Javascript / HTML5
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POremove a previous stroke (make a temporary line) - Javascript / HTML5
      1. This table or related slice is empty.
      1. VTUpMod
    1. COyou can try at click show a second temp canvas on top of the first and blit inside the moussemove line, at second click remove the canvas and do the line on the first one
      singulars
      1. POremove a previous stroke (make a temporary line) - Javascript / HTML5
      1. USr043v
    2. COblit? I had a similar idea to have a canvas nested inside the canvas and then on mouse move, I would clear the nested canvas and then on click I would push the line onto the containing canvas. Thing is I don't know how to clear a canvas and even if I did, I feel like that would take a lot of memory.
      singulars
      1. POremove a previous stroke (make a temporary line) - Javascript / HTML5
      1. USFunkyguy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload