Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First off, for simplicity's sake here is a fiddle on how to draw a basic Line with your mouse and KineticJS: <a href="http://jsfiddle.net/projeqht/fF3hh/" rel="nofollow">http://jsfiddle.net/projeqht/fF3hh/</a></p> <p>Let's say you already have two circles on the stage, and you need to draw a line to connect them.</p> <p>We can use <code>e.targetNode</code> to select the nodes on each event (mousedown, mouseup), for example:</p> <pre><code>layer.on("mousedown", function (e) { var nodeDown = e.targetNode; } layer.on("mouseup", function (e) { var nodeUp = e.targetNode; } </code></pre> <p>We need to check if the parent of <code>nodeDown</code> is a Kinetic.Group <strong>or</strong> something else.</p> <ol> <li>If the target node <code>nodeDown</code> has a Kinetic.Group for a parent, we can use this Group to store the new line, and the 2nd target node <code>nodeUp</code>.</li> <li>If the target node <code>nodeUp</code> does not have a Kinetic.Group for a parent, we need to see if <code>nodeUp</code> has a Group for a parent. If <code>nodeUp</code> has a Kinetic.Group for a parent, then we can use that Group to store the new line, and the first target node <code>nodeDown</code>.</li> <li>If neither <code>nodeDown</code> or <code>nodeUp</code> have a group for a parent, then we will need to create a new group for them and add all 3 shapes (2 circles and a line) to that new group.</li> </ol> <p>Use this tutorial to learn how to move shapes from 1 group to another: <a href="http://www.html5canvastutorials.com/kineticjs/html5-canvas-move-shape-to-another-container-with-kineticjs/" rel="nofollow">http://www.html5canvastutorials.com/kineticjs/html5-canvas-move-shape-to-another-container-with-kineticjs/</a> </p> <p>Also, if you move a shape from one group to another, you may want to <code>remove()</code> or <code>destroy()</code> the extra group if it is no longer needed.</p> <p>While drawing a Line, you will have to disable dragging the shapes, so that you can drag and draw with a mouse. You can do that by doing something similar to this:</p> <pre><code>function stopDrag() { for (var i=0; i&lt;layer.children.length; i++) { layer.children[i].setDraggable(false); } } function startDrag() { for (var i=0; i&lt;layer.children.length; i++) { layer.children[i].setDraggable(true); } } </code></pre> <p>This will make all the children of layer draggable and undraggable, but you might want to limit that by being more specific than select <code>layer.children</code>. A nice trick I liked to use here was to name all groups that were draggable as "draggable_shapes" and then use <code>var draggableArray = stage.get('.draggable_shapes')</code> to select all the groups that are allowed to be dragged, then you could loop through that array and <code>setDraggable()</code>.</p> <p>Another point to note is that the X and Y coordinates of the Line will be a bit tricky to calculate, depending on if it has a Group as a parent or a Layer. If the Line is grouped, line's coordinates will be relative to the <strong>Group</strong> position, or else the Line's coordinates will be relative to the <strong>Stage</strong> (top left corner).</p> <p>This will get you started on connecting a line with two different circles. It's up to you to do the coordinate logic if you want the lines to only connect on the outer rim of the circles.</p> <p>Maybe you might want to add a transparent rectangle (attribute <code>opacity: 0</code>) behind each circle, so that on mousedown with the rectangle, you will call <code>drawLine()</code> to start drawing a line. Or else if the user clicks the circle, it will drag the group. At least that has similar functionality to the lucid charts application.</p> <p>Custom Hit Function (<a href="http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/" rel="nofollow">http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/</a>) would probably be a cleaner way to do this but I'm not 100% on using Custom Hit Functions, someone else might know better.</p> <p>Let me know if you need further help. Good luck!</p>
    singulars
    1. This table or related slice is empty.
    1. POKineticJS: Draw Arrow between two shapes
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USprojeqht
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POKineticJS: Draw Arrow between two shapes
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThank you very very much for this answer. I'll try it out tomorrow, because there's a big knot in my brain right now. I've marked the answer as accepted because at first glance it all seems very detailed and logical to me, so again, thank you! :)
      singulars
      1. PO
      1. USDominik
    2. CO+1 for custom hit functions. This is a perfect use case for them
      singulars
      1. PO
      1. USEric Rowell
    3. COso, it works :) just for the info. Only problem: using touch-interface, I only get NaN for x and y-coordinates. Any Ideas on how to change the code to implement touch coordinates? I tried getTouchPosition() and again getX and so on, but it didn't work.
      singulars
      1. PO
      1. USDominik
 

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