How would I get specific points from an object array?

Question

I have a JSON file that has an object array that basically plots lines on a canvas. I am trying to write a script that shows, in the console, what points a line has when I click on it. I figured that the following script would work, but it doesn't. Does anyone have an idea of how I can do this?

JSON

[{
"lines": {
        "width": 3,
        "stroke": "#FFFFFF",
        "x1": [825.853, 804.33, 590.5, 890.682, 379.421, 582.81, 853.391, 575.932, 566.508, 834.161, 770.832, 504.225, 584.83, 601.055, 549.104, 477.494, 597.43, 640.386, 867.994, 563.965, 621.281, 904.754, 853.391, 475.435, 360.025, 478.058, 843.323, 818.653, 819.061],
        "y1": [476.233, 485.06, 467.266, 84.389, 269.767, 257.901, 120.505, 399.223, 577.706, 409.69, 257.348, 366.667, 403.409, 482.969, 257.638, 367.334, 141.663, 258.163, 258.163, 258.163, 177.563, 84.389, 120.505, 111.271, 84.389, 84.389, 84.389, 499.195, 409.69],
        "x2": [866.613, 804.33, 646.069, 209.797, 379.421, 582.81, 869.23, 575.932, 611, 849.251, 770.832, 504.225, 622.517, 601.055, 504.225, 477.494, 597.43, 816.364, 938.393, 604.272, 621.281, 946.752, 843.323, 212.46, 360.025, 478.058, 843.323, 804.33, 803.378],
        "y2": [515.418, 514.898, 467.266, 84.389, 308.815, 214.216, 120.505, 377.24, 577.706, 409.69, 111.778, 466.158, 403.409, 434.29, 257.638, 484.136, 111.271, 258.163, 258.163, 258.163, 203.205, 84.389, 120.505, 111.271, 236.059, 331.048, 136.993, 499.195, 409.69],
        "x3": [866.613, 646.592, 646.069, 209.797, 344.739, 380.026, 869.23, 793.075, 611, 849.251, 621.281, 548.612, 622.517, 589.5, 504.225, 548.717, 480.333],
        "y3": [534.787, 514.898, 394.513, 577.706, 308.815, 214.216, 99.814, 377.24, 498.668, 499.195, 111.778, 466.158, 467.789, 434.29, 330.985, 484.136, 111.271],
        "x4": [645.021, 646.592, 804.436, 566.508, 344.739, 380.026, 896.501, 793.075, 590.25, 833.488, 621.281],
        "y4": [534.787, 483.493, 394.513, 577.706, 557.043, 235, 99.814, 84.389, 498.668, 499.195, 141.663],
        "x5": [645.021, 592, 804.436, 566.508, 556.571, 380.026, 896.501],
        "y5": [586.081, 483.493, 421.315, 565.144, 557.043, 236.059, 89.553],
        "x6": [191.216],
        "y6": [586.081],
        "x7": [191.216],
        "y7": [111.271],
        "x8": [209.797],
        "y8": [111.271]
    }
}]

JS

var lines = result[0].lines;
$(lines).on("click", function(){
    var test = $(this).find(back_lines.x1);
    console.log(test);
})

As of right now, nothing is being printed to the console.

'Elements' inside a canvas are not DOM elements, they're just pixels, and you can't directly detect a click on them. You need to get the coordinates of the click relative to the canvas element, and then determine whether or not a line is there. — blex, Mar 16 '15 at 12:39
@blex, how would I do that? I'm assuming that the first thing I need to do is get the mouse position, that's no problem. But how do I determine whether or not it was on a line? — , Mar 16 '15 at 12:41
I'm not that experienced with canvas, but this might get you on the right track: http://stackoverflow.com/questions/28842520/click-on-line-in-canvas — blex, Mar 16 '15 at 12:42

score -1 · Answer 1 · answered Mar 16 '15 at 12:49

In your code $(lines).on("click",..) function is only invoked during onclick event.

Please find the code:

var result = [{
"lines": {
    "width": 3,
    "stroke": "#FFFFFF",
    "x1": [825.853, 804.33, 590.5, 890.682, 379.421, 582.81, 853.391, 575.932, 566.508, 834.161, 770.832, 504.225, 584.83, 601.055, 549.104, 477.494, 597.43, 640.386, 867.994, 563.965, 621.281, 904.754, 853.391, 475.435, 360.025, 478.058, 843.323, 818.653, 819.061],
    "y1": [476.233, 485.06, 467.266, 84.389, 269.767, 257.901, 120.505, 399.223, 577.706, 409.69, 257.348, 366.667, 403.409, 482.969, 257.638, 367.334, 141.663, 258.163, 258.163, 258.163, 177.563, 84.389, 120.505, 111.271, 84.389, 84.389, 84.389, 499.195, 409.69],
    "x2": [866.613, 804.33, 646.069, 209.797, 379.421, 582.81, 869.23, 575.932, 611, 849.251, 770.832, 504.225, 622.517, 601.055, 504.225, 477.494, 597.43, 816.364, 938.393, 604.272, 621.281, 946.752, 843.323, 212.46, 360.025, 478.058, 843.323, 804.33, 803.378],
    "y2": [515.418, 514.898, 467.266, 84.389, 308.815, 214.216, 120.505, 377.24, 577.706, 409.69, 111.778, 466.158, 403.409, 434.29, 257.638, 484.136, 111.271, 258.163, 258.163, 258.163, 203.205, 84.389, 120.505, 111.271, 236.059, 331.048, 136.993, 499.195, 409.69],
    "x3": [866.613, 646.592, 646.069, 209.797, 344.739, 380.026, 869.23, 793.075, 611, 849.251, 621.281, 548.612, 622.517, 589.5, 504.225, 548.717, 480.333],
    "y3": [534.787, 514.898, 394.513, 577.706, 308.815, 214.216, 99.814, 377.24, 498.668, 499.195, 111.778, 466.158, 467.789, 434.29, 330.985, 484.136, 111.271],
    "x4": [645.021, 646.592, 804.436, 566.508, 344.739, 380.026, 896.501, 793.075, 590.25, 833.488, 621.281],
    "y4": [534.787, 483.493, 394.513, 577.706, 557.043, 235, 99.814, 84.389, 498.668, 499.195, 141.663],
    "x5": [645.021, 592, 804.436, 566.508, 556.571, 380.026, 896.501],
    "y5": [586.081, 483.493, 421.315, 565.144, 557.043, 236.059, 89.553],
    "x6": [191.216],
    "y6": [586.081],
    "x7": [191.216],
    "y7": [111.271],
    "x8": [209.797],
    "y8": [111.271]
}
}];

 var lines = result[0].lines;
 console.log(lines);
 for(var a in lines){
    if(a=='x1'){
    console.log(a);
    console.log(lines[a]);
 }
}

How would I get specific points from an object array?

1 Answers1