Question

I'm using lines a module for Titanium Appcelerator to draw lines. In lines you just need 2 Object with coordinates to draw a line (start and end point).

I want to modify the start/end point object with a 'touchmove' event, However I'm fairly new with JavaScript and I just can't figure it out the right way to do it.

var lines = require('com.lines'); //<< Import lines module

var attrib = { 
    color:'red',
    touchEnable:true,
    thickness:20
};

var from = {x:20,y:100}; //<< Start Point Object Coordinates
var to = {x:200,y:100}; //<< End POint Object Coordinates
var lineOne = lines.createLine(from, to, attrib); //<<Creates lineOne var with attributes
win.add(lineOne); //Draw the line. 

I have no problem moving the whole line using the lineOne variable, however as I said I can't found a way to modify the objects dynamically.

thanks!

UPDATE - After Josiah's suggestions I was able to successfully modify the "to" variable, however the line would redraw itself with the original "to" value no matter what. I'm either using the setTo method incorrectly or I need something else to update and redraw the line..

var attrib = {
    color:'red',
    touchEnable:true,
    thickness:20
};

var from = {x:20,y:100}; //Insert touchMoveFunction <<-- Here! 
var to = {x:200,y:100};
var lineOne = lines.createLine(from, to, attrib);

function drawline(e){
    win.add(lineOne);
};

alert(to);

var lineOne = lines.createLine(from,to,attrib);

var buttonPosition = Ti.UI.createButton({
    title:'CLick.Me!',
    bottom:0
});
win.add(buttonPosition);

buttonPosition.addEventListener('click',function(e){
    to = {x:200,y:300};
    lineOne.setTo(to);
    drawline();
    alert(to);
});
Était-ce utile?

La solution

Just attach an event listener for touchmove to the window (or whatever view container that is holding the lines) and then refresh, or whatever is necessary for the lines to change, heres a little example:

var lineOne = lines.createLine(from, to, attrib);
win.add(lineOne);
win.addEventListener('touchmove', function(e) {
    win.remove(lineOne);
    var touchX = e.x;
    var touchY = e.y;
    var to = {x:touchX,y:touchY}; 
    lineOne = lines.createLine(from, to, attrib);
    // Add a new line
    win.add(lineOne);
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top