StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODynamically created HTML5 canvas element in Kinetic.js fails with draggable:true
primarykey
Id
19687668
data
AcceptedAnswerId
19688801
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-10-30T15:53:21.840
FavoriteCount
0
LastActivityDate
2013-10-30T16:40:52.567
LastEditDate
LastEditorUserId
0
OwnerUserId
2839538
ParentId
0
PostTypeId
1
Score
0
ViewCount
546
LastEditorDisplayName
text
Body
<p>I've been playing around with KineticJS and I've run into an interesting problem. I'm not really sure how to solve it. Here is my code.</p> <p>HTML </p> <pre><code><body> <div id="container"></div> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> </body> </code></pre> <p>JavaScript</p> <pre><code>// Kinetic Example var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 400 }); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, fill: 'red', stroke: 'black', strokeWidth: 4, draggable: true }); // add the shape to the layer layer.add(circle); // add the layer to the stage stage.add(layer); // My doCircle function function doCircle(ddata) { var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: ddata[1], y: ddata[2], radius: ddata[3], fill: '' + ddata[4] + '', stroke: '' + ddata[5] + '', strokeWidth: ddata[6], draggable: true }); layer.add(circle); stage.add(layer); } // Data example (will be from user input) var data = "circle 50 50 20 green blue 5"; // Make data an array var arrData = data.split(" "); // Get draw type switch (arrData[0]) { case "circle": doCircle(arrData); break; } </code></pre> <p>I've also made a <a href="http://jsfiddle.net/TJcyY/" rel="nofollow">JS Fiddle </a> for this. You'll notice the the large red circle statically made is draggable. The smaller green circle that I built using "data" when clicked, either disappears or sets to 0,0 on the canvas. I'm assuming this is possibly a data type issue with data<a href="http://jsfiddle.net/TJcyY/" rel="nofollow">1</a> and data[2] from the array on the x,y of the circle? But if that were the case why does the element render correctly in the first place and only break when attempted to drag it?</p> <p>Thanks for your help and solutions. </p>
Tags
<javascript><html5><canvas><kineticjs>
Title
Dynamically created HTML5 canvas element in Kinetic.js fails with draggable:true
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. UStremor
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

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.