StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POMouseup event is intermittant from Scaled KineticJS layer
text
Body
copied!<p>See here for example:</p> <p><a href="http://jsfiddle.net/tigz_uk/B8UDq/45/embedded/result/" rel="nofollow">http://jsfiddle.net/tigz_uk/B8UDq/45/embedded/result/</a></p> <p>Fiddle code:</p> <p><a href="http://jsfiddle.net/tigz_uk/B8UDq/45/" rel="nofollow">http://jsfiddle.net/tigz_uk/B8UDq/45/</a></p> <p>Most Relevant snippet:</p> <pre><code>function whenAreaSelected(stage, layer, image) { var rect, down = false; var eventObj = layer; eventObj.off("mousedown"); eventObj.off("mousemove"); eventObj.off("mouseup"); eventObj.on("mousedown", function (e) { console.log("Mousedown..."); if (rect) { rect.remove(); } var relativePos = getRelativePos ( stage, layer); down = true; var r = Math.round(Math.random() * 255), g = Math.round(Math.random() * 255), b = Math.round(Math.random() * 255); rect = new Kinetic.Rect({ x: relativePos.x, y: relativePos.y, width: 11, height: 1, fill: 'rgb(' + r + ',' + g + ',' + b + ')', stroke: 'black', strokeWidth: 4, opacity: 0.3 }); layer.add(rect); }); eventObj.on("mousemove", function (e) { if (!down) return; var relativePos = getRelativePos ( stage, layer ); var p = rect.attrs; rect.setWidth(relativePos.x - p.x); rect.setHeight(relativePos.y - p.y); layer.draw(); }); eventObj.on("mouseup", function (e) { console.log("Mouse Up..."); down = false; var p = rect.attrs; var s = layer.getScale(); console.log("Rect x: " + p.x + " y: " + p.y + " width: " + p.width + " height: " + p.height + " sx: " + s.x + " sy: " + s.y); }); } var stageWidth = 1024; var stageHeight = 700; var imageWidth = 1299; var imageHeight = 1064; var initialScale = calcScale(imageWidth, imageHeight, stageWidth, stageHeight); var stage = new Kinetic.Stage({ container: "canvas", width: stageWidth, height: stageHeight }); var layer = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function () { var diagram = new Kinetic.Image({ x: -500, y: -500, image: imageObj, width: imageWidth, height: imageHeight }); layer.add(diagram); layer.setScale(initialScale); whenAreaSelected(stage, layer, diagram); layer.draw(); } var zoom = function (e) { var zoomAmount = e.wheelDeltaY * 0.001; layer.setScale(layer.getScale().x + zoomAmount) layer.draw(); } document.addEventListener("mousewheel", zoom, false); stage.add(layer); imageObj.src = 'https://dl.dropbox.com/u/746967/Serenity/MARAYA%20GA.png'; </code></pre> <p>It seems to me as though the mouseup event is intermittent at best.</p> <p>Any idea what's going on here? It also seems to be worse when the Image is offset rather than displayed at 0,0. And I think it relates to the scaling of the layer as it all works okay at scale 1.</p> <p>Is this a kinetic bug?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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