html5 canvas kineticjs event -
I think there is a problem with getting events for a Kinetic fire. Line with stroke of 1 or less I thought adding all the rows to a group, and then enclosing the event to a group would suffice, but this does not work.
I have simplified the code which I am trying to complete to minimize the post:
var gridoffsetx = 45, grid height = 200, gridwidth = 760, lineHight = grid height / 4; Var platform, baslere = new kinetic Layers (); // debug message var debug text = new kinetic Text ({font style: 'bold', font size: 12, fill: 'red', x: 45, y: grid height + 10, text: 'mouseup'}); Window.onload = function () {stage = new kinetic.Stage ({container: 'canvas', width: 800, height: 200 + 22}); Var Index = 0.5; Var yPosition = (grid height / 4 * index); // base object var text = new kinetic Text ({fontStyle: "bold", fontSize: 10, fill: "black", x: 0, y: yposition, text: "line A", align: "true"}); // center text lesson Offset (text.height () / 2); BaseLayer.add (text); BaseLayer.add (adstat to text (text, ++ index, "row b")); BaseLayer.add (adstat to text (text, ++ index, "roi c")); BaseLayer.add (adstat to text (text, ++ index, "ro d")); Var Grid Group = New Kinetic. group (); DrawGrid (gridGroup); wireGridEvents (gridGroup); baseLayer.add (gridGroup); baseLayer.add (debugText); Stage.add (baseLayer); }; Function addStatusText (control, index, text) {var yposition = (gridHeight / 4 * index); Control = control.clone ({text: text, y: yposition}); Control.offsetY (control.height () / 2); Return control; } Function dragrid (grid group) {var rect = new kinetic. Reference ({X: Grid OffsetX, Y: 0, Width: Gridwidth, Height: Grid Height, Stroke: "Black", Strokewidth: 1}); GridGroup.add (Rect); Var t1, t2, index1; For (index 1 = 1; index 1 <= 3; index 1 ++) {t2 = (grid height / 4 * index 1); GridGroup.add (drawbridge (grid offset x, t2, grid offset x + gridwidth, t2)); } (Index 1 = 1; index 1 & lt; 48; index 1 ++) {t1 = grid offset x + (gridwidth / 48) * index 1; GridGroup.add (Drogridine (T1, 0, T1, Grid Height)); }} Function drawGridLine (startX, startY, endX, endY) {new kinetic. Line ({digits: [startX, startY, endX, endY], stroke: 'black', stroke width: 0.5}); } Function wireGridEvents (group) {group.on ('mousedown', function) {writeMessage ('mousedown');}); Group.on ('mouseup', function () {writeMessage ('mouseup');}); } Write the function message (message) {debugText.text (message); BaseLayer.draw (); } Example of BELD:
You will see that if you click between the lines, the text under the grid will be converted to "Mussudown" If you repeat the same process at the top of a line then the event will not be in the fire.
I am pretty sure that this person (who was never answered) is close to the same thing. A comment is to set the stroke to 2, but it is not an option because of the size of the grid for small screen sizes.
Is there any option to lay any type of "transparent" shape on the grid which can hold all the events at any place in the grid?
This is actually about kinetic groups, shapes, mouse events and aliasing, and @allton two days ago Was resolved by. See also the problem on gitub (and 3 other related issues).
I have updated my bela to use the code from this latest commitment and then it works fine: so by updating your project to use this latest KineticJS 'release' Your problem should be solved (download it from Gitubo, and not from website kineticjs.com ). One note, your behavior is also described in the version of Bela when the stroke is 2 or more, there is almost no fire in the center of the line.
Comments
Post a Comment