optimizing drawing speed and fixing #16
This commit is contained in:
		
							parent
							
								
									26235fa3d1
								
							
						
					
					
						commit
						9df7d9d129
					
				| 
						 | 
				
			
			@ -475,6 +475,66 @@ function updatePosition() {
 | 
			
		|||
function renderCanvas() {
 | 
			
		||||
	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) {
 | 
			
		||||
		if (client.valid) {
 | 
			
		||||
			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.lineWidth = client.r*2*radius*f;
 | 
			
		||||
				context.lineCap = 'round';
 | 
			
		||||
				context.beginPath();
 | 
			
		||||
				context.moveTo(client.xo, client.yo);
 | 
			
		||||
				context.lineTo(client.x,  client.y );
 | 
			
		||||
| 
						 | 
				
			
			@ -502,6 +561,7 @@ function renderCanvas() {
 | 
			
		|||
			}
 | 
			
		||||
		}
 | 
			
		||||
	});
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
	if (mapDrag) {
 | 
			
		||||
		var x = Math.min(mouseDragX0, mouseDragX);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue