Как получить конкретные точки из массива объектов?

У меня есть файл JSON, у которого есть массив объектов, который в основном отображает линии на холсте. Я пытаюсь написать сценарий, который показывает в консоли, что указывает на строку, когда я нажимаю на нее. Я понял, что следующий скрипт будет работать, но это не так. Кто-нибудь имеет представление о том, как я могу это сделать?Как получить конкретные точки из массива объектов?

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] 
    } 
}]

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

Как прямо сейчас, ничего не печатается на консоль.

источник

2015-03-16 Anonymous

«Элементы» внутри холста не DOM элементы, они просто пикселей, и вы не можете напрямую обнаружить щелчок на них. Вам нужно получить координаты клика относительно элемента canvas, а затем определить, есть ли там строка. – blex

@blex, как бы я это сделал? Я предполагаю, что первое, что мне нужно сделать, это получить позицию мыши, это не проблема. Но как определить, была ли она на линии? –

Я не настолько опытен с холстом, но это может привести вас к правильному пути: http://stackoverflow.com/questions/28842520/click-on-line-in-canvas – blex

-1

В вашем коде $(lines).on("click",..) функция вызывается только во время события onclick.

Пожалуйста, найдите код:

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]); 
} 
}

источник

2015-03-16 12:49:36

Это не отвечает на вопрос. –

Как получить конкретные точки из массива объектов?

ответ

Смежные вопросы