Kineticjs Dragend - How to save getPosition () results

Question

I am new to Kineticjs but not a great javascript encoder, so I hope to get some help with this example. http://jsfiddle.net/pwM8M/

I am trying to keep the x axis on the doors, so when redrawing not associated with the doors is done, they do not return to the default position. (several types of doors and windows)

Each form element can have several values ​​(more than one door), so I need a way to store / retrieve the data that is currently contained in the warning on jsfiddle.

I did some research but came up empty. Can anyone help with what I have provided?

function OH(x,y,w,h) { var oh = new Kinetic.Text({ x:x, y: y, width: w*scale, height: h*scale, stroke: wtc, strokeWidth: 1, fill: 'brown', fontSize: 6, fontFamily: 'Calibri', padding:4, text: w+' x '+h+' OH\n\n<- DRAG ->', align: 'center', textFill: 'white', draggable: true, dragConstraint:'horizontal', dragBounds: { left:xoffset, right: xoffset+width+length-(w*scale) } }); oh.on('dragend', function(e) { alert(oh.getPosition().x); }); window.south.add(oh); } 

Thanks,

Answer 1

Create a new array before the function, for example:

  var xArray = new Array(); 

then inside your function

  oh.on('dragend', function(e) { alert(oh.getPosition().x); // ADD NEW ITEM TO ARRAY, STORE X POSITION xArray.push(oh.getPosition().x); }); 

and therefore, all x values ​​are stored in an array. If you need to clear an array, you can simply create a new one with the same name. And you can loop through it, if necessary.

update: http://jsfiddle.net/pwM8M/2/

Answer 2

I have a fixed size 40x40 rectangle in which I use the drag and drop function. try it

  var box = new Kinetic.Rect({ x: parseFloat(area.size.x), y: parseFloat(area.size.y), width: 40, //parseFloat(area.size.width) height: 40, fill: area.color, stroke: 'black', strokeWidth: 1, opacity: 0.6, id : area.id + id, draggable: true, dragBoundFunc: function(pos) { // x var newX = pos.x < 0 ? 40 : pos.x; var newX = newX > _self.canvasWidth - area.size.width ? _self.canvasWidth - area.size.width : newX; // y var newY = pos.y < 0 ? 40 : pos.y; var newY = newY > _self.canvasHeight - area.size.height ? _self.canvasHeight - area.size.height : newY; return { x: newX, y: newY }; 

Use this function

 box.on('dragend', function() { _self.draw = false; _self.dragArea(area, box); }); 

and try playing with xy coordinates

 dragArea: function(area, box){ if(box){ $$('#' + this.formId + ' [name="areas[' + area.id + '][size][x]"]').first().value = parseInt(box.attrs.x); $$('#' + this.formId + ' [name="areas[' + area.id + '][size][y]"]').first().value = parseInt(box.attrs.y); area.size.x = parseInt(box.attrs.x); area.size.y = parseInt(box.attrs.y); } },