Расширить Div плавно, не отставая
У вас разные решения, основанные на том, как вы рисуете свой круг. В настоящее время то, что вы делаете, состоит в том, чтобы разделить 2*pi на сегменты n и соединить их вместе. Ну, первое решение, которое приходит на ум, - изменить диапазон дуги.
Например, чтобы сделать только дугу 3*PI/4, вы можете просто изменить свой
float theta = 2.0f * PI * float(ii) / float(num_segments);
-
float theta = 3.0f * PI / 4.0f * float(ii) / float(num_segments);
Или, если вы считаете, что полный круг соответствует 1, и ничего не соответствует 0, вы можете создать дугу, которая s раз (например, 3/8), вы можете просто написать:
float theta = 2.0f * PI * s * float(ii) / float(num_segments);
Обратите внимание, что вам может не потребоваться, чтобы дуга начиналась с угла 0. Поэтому вы можете добавить константу, которая также является стартовым углом к этой формуле:
float theta = 2.0f * PI * s * float(ii) / float(num_segments) + start;
Другим решением будет вместо вычисления углов внутри дуги, вы получите начальный и конечный углы и размер шага. Затем у вас есть:
for (theta = start; theta < end; theta += step)
и убедитесь, что в конце вашего GL_LINE_STRIP вы выполняете glVertex2f из theta, соответствующий углу end, чтобы закончить дугу правильно.
Из ваших комментариев к другому ответу, кажется, что вы действительно ищете другие кривые, такие как кривые безье или сплайны или другие .
1 ответ
Когда браузер получает ответ, функция обратного вызова, переданная в .done(), добавляется в очередь цикла событий JavaScript.
Во время обработки данных он блокирует цикл обработки событий JavaScript для обработки дальнейших задач. Даже такие вещи, как обработка ввода мыши, тем временем блокируются. Если обрабатываемые данные слишком велики, они становятся более заметными для конечного пользователя.
Вы можете разделить полученные данные на куски и раздать их в цикл событий отдельно, вызвав для них setTimeout(). Источник: Сотрудничающая часть You Not Know JS: Async & amp; Производительность
Вот как это может работать для вашего кода ниже: функция обратного вызова, переданная в .done(), и вспомогательная функция:
function(data) {
var ht = "<table class='table'><thead><tr><th>No</th><th>Name</th><th>Code</th><th>Min qty</th><th>uni</th><th>Group</th><th>Sub Category</th><th>Part Number</th><th>Location</th><th>Image</th><th >Tyre</th><th>Back</th></tr></thead>";
$("#js_res").append(ht);
processData(data, 1);
$("body").css("cursor", "default");
}
function processData(data, no) {
var chunk = data.splice(0, 100);
var ht = "";
$.each(chunk, function(key, val) {
ht +="<tr>"+"<td>"+no+"</td>"+"<td>"+val.name+"</td>"+"<td>"+val.code+"</td>"+"<td>"+val.min_qty+"</td>"+"<td>"+val.unit+"</td>"+"<td>"+val.group+"</td><td>"+val.sub_category+"</td><td>"+val.part_number+"</td><td>"+val.location+"</td>";
if (val.image) {
ht += "<td><a target='_blank' href='"+"<?php echo base_url('../uploads/'); ?>/"+val.image+"'><button class='fa fa-picture-o'></button></a></td>";
}else{
ht += "<td></td>";
}
ht +="<td>"+val.tyre+"</td>";
ht += "<td>";
if (val.reusable == 1) {
ht +="yes";
}else{
ht+="no";
};
ht += "</td>";
ht += "<td><button class='btn edit btn-info btn-xs' data-toggle='modal' data-target='#editModel' data-id='"+val.id+"' data-name='"+val.name+"' data-code='"+val.code+"' data-min_qty='"+val.min_qty+"' data-unit='"+val.unit+"' data-group='"+val.group+"' data-sub_category='"+val.sub_category+"' data-part_number='"+val.part_number+"' data-location='"+val.location+"' data-tyre_number='"+val.tyre+"' data-back='"+val.reusable+"'><span class='fa fa-edit'></span></button></td>";
ht += "</tr>";
no++;
});
$("#js_res").append(ht);
if (data.length > 0) {
setTimeout(function(){
processData(data, no);
}, 0);
}
}