HTML5 キャンバスに図形を描画しようとしています。これらの形状は、データベースのステータスに依存します。図形のステータスを返す Web サービスにアクセスします。その部分は機能します。しかし、get の関数部分で形状変数を使用しようとすると、形状変数が最後のステータスによって上書きされます。
get 呼び出しなしで図形を描画しようとしましたが、うまくいきました。誰かが私が間違っていることを教えてもらえますか?
for (var i = 0; i < map_json.shapes.length; i++) {
var shape = map_json.shapes[i];//variable
if (!(force && i == active_btn_index) || (i == selected_btn_index)) {
drawShape(
shape.c,
map_btns_context,
(i == active_btn_index || i == selected_btn_index) ? options_active : options
);
if (shape.lotNo != undefined && shape.tc != undefined) {
$.getJSON(site_url + "DesktopModules/DNN.WebAPI/API/Ajax/GetStatus?lotNo=" + shape.lotNo,
function (data, success) {
console.log(shape);
//my shape.tc is always overwritten by the last returned data item
map_btns_context.drawImage(map_type_img[data.status], shape.tc[0] - 12, shape.tc[1] - 12);
}
);
//map_btns_context.drawImage(map_type_img[shape.t], shape.tc[0] - 12, shape.tc[1] - 12);
}
}
body += '<area shape="poly" coords="' + shape.c.toString() + '" onmouseover="updateButtons(' + i + ')" />';//title="Shape ' + (i+1) + '" />';
}