optimizing drawing speed and fixing #16
This commit is contained in:
parent
26235fa3d1
commit
9df7d9d129
|
@ -475,6 +475,66 @@ function updatePosition() {
|
||||||
function renderCanvas() {
|
function renderCanvas() {
|
||||||
context.clearRect(0, 0, width, height);
|
context.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
|
var drawLists = [[],[],[],[]];
|
||||||
|
clients.forEach(function (client) {
|
||||||
|
if (client.valid) {
|
||||||
|
var dx = client.x - client.xo;
|
||||||
|
var dy = client.y - client.yo;
|
||||||
|
var r = Math.sqrt(dx*dx + dy*dy);
|
||||||
|
|
||||||
|
var f = (selectedCount > 0) ? (client.selected ? 1.3 : 0.4) : 1;
|
||||||
|
|
||||||
|
if ((r > 1) && (!client.settled)) {
|
||||||
|
if (client.selected) {
|
||||||
|
drawLists[0].push(client);
|
||||||
|
} else {
|
||||||
|
drawLists[1].push(client);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (client.selected) {
|
||||||
|
drawLists[2].push(client);
|
||||||
|
} else {
|
||||||
|
drawLists[3].push(client);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
context.strokeStyle = 'rgba(238,80,0,0.3)';
|
||||||
|
context.lineWidth = 2*radius;
|
||||||
|
context.beginPath();
|
||||||
|
drawLists[0].forEach(function (client) {
|
||||||
|
context.moveTo(client.xo, client.yo);
|
||||||
|
context.lineTo(client.x, client.y );
|
||||||
|
})
|
||||||
|
context.stroke();
|
||||||
|
|
||||||
|
var a = (selectedCount > 0) ? 0.1 : 0.2;
|
||||||
|
context.strokeStyle = 'rgba(0,0,0,'+a+')';
|
||||||
|
context.lineWidth = 2*radius*((selectedCount > 0) ? 0.4 : 1);
|
||||||
|
context.beginPath();
|
||||||
|
drawLists[1].forEach(function (client) {
|
||||||
|
context.moveTo(client.xo, client.yo);
|
||||||
|
context.lineTo(client.x, client.y );
|
||||||
|
})
|
||||||
|
context.stroke();
|
||||||
|
|
||||||
|
context.fillStyle = 'rgb(238,80,0)';
|
||||||
|
drawLists[2].forEach(function (client) {
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(client.x, client.y, radius*1.3, 0, 2*Math.PI, false);
|
||||||
|
context.fill();
|
||||||
|
});
|
||||||
|
|
||||||
|
var r = (selectedCount > 0) ? 0.4 : 1;
|
||||||
|
context.fillStyle = 'rgb(0,0,0)';
|
||||||
|
drawLists[3].forEach(function (client) {
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(client.x, client.y, radius*r, 0, 2*Math.PI, false);
|
||||||
|
context.fill();
|
||||||
|
})
|
||||||
|
|
||||||
|
/*
|
||||||
clients.forEach(function (client) {
|
clients.forEach(function (client) {
|
||||||
if (client.valid) {
|
if (client.valid) {
|
||||||
var dx = client.x - client.xo;
|
var dx = client.x - client.xo;
|
||||||
|
@ -488,7 +548,6 @@ function renderCanvas() {
|
||||||
|
|
||||||
context.strokeStyle = (client.selected) ? 'rgba(238,80,0,'+a+')' : 'rgba(0,0,0,'+a+')';
|
context.strokeStyle = (client.selected) ? 'rgba(238,80,0,'+a+')' : 'rgba(0,0,0,'+a+')';
|
||||||
context.lineWidth = client.r*2*radius*f;
|
context.lineWidth = client.r*2*radius*f;
|
||||||
context.lineCap = 'round';
|
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.moveTo(client.xo, client.yo);
|
context.moveTo(client.xo, client.yo);
|
||||||
context.lineTo(client.x, client.y );
|
context.lineTo(client.x, client.y );
|
||||||
|
@ -502,6 +561,7 @@ function renderCanvas() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
if (mapDrag) {
|
if (mapDrag) {
|
||||||
var x = Math.min(mouseDragX0, mouseDragX);
|
var x = Math.min(mouseDragX0, mouseDragX);
|
||||||
|
|
Loading…
Reference in New Issue