Sarean-euskaraz
/
relog
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved display of selected dots

This commit is contained in:
Micho 2013-05-22 15:45:06 +02:00
parent 5776fec080
commit 69e21c485a
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
clients/anim/main.js
View File

@ -56,6 +56,7 @@ var mouseDragY0;
var mouseDragX; var mouseDragX;
var mouseDragY; var mouseDragY;
var sliderDragStartTime; var sliderDragStartTime;
var selectedCount = 0;
function sliderDragStart() { function sliderDragStart() {
mouseDrag = true; mouseDrag = true;
@ -69,6 +70,7 @@ function mapDragStart() {
mouseDragX = mouseDragX0; mouseDragX = mouseDragX0;
mouseDragY = mouseDragY0; mouseDragY = mouseDragY0;
clients.forEach(function (c) { c.selected = false; }); clients.forEach(function (c) { c.selected = false; });
selectedCount = 0;
} }
function mouseDragMove(event) { function mouseDragMove(event) {
@ -86,8 +88,14 @@ function mouseDragMove(event) {
var x1 = Math.max(mouseDragX0, mouseDragX) - p.left; var x1 = Math.max(mouseDragX0, mouseDragX) - p.left;
var y0 = Math.min(mouseDragY0, mouseDragY) - p.top; var y0 = Math.min(mouseDragY0, mouseDragY) - p.top;
var y1 = Math.max(mouseDragY0, mouseDragY) - p.top; var y1 = Math.max(mouseDragY0, mouseDragY) - p.top;
selectedCount = 0;
clients.forEach(function (c) { clients.forEach(function (c) {
c.selected = ((c.x >= x0) && (c.x <= x1) && (c.y >= y0) && (c.y <= y1)); if ((c.x >= x0) && (c.x <= x1) && (c.y >= y0) && (c.y <= y1)) {
c.selected = true;
selectedCount++;
} else {
c.selected = false;
}
}); });
renderCanvas(); renderCanvas();
@ -113,6 +121,7 @@ function init() {
context = $('#canvas')[0].getContext('2d'); context = $('#canvas')[0].getContext('2d');
clients = []; clients = [];
var v = 0.2; var v = 0.2;
data.matrix.forEach(function (times, index) { data.matrix.forEach(function (times, index) {
clients[index] = { point:undefined, x:0, y:0, r:0, x0:0, y0:0, r0:0, index:index, lastEvent:0, selected:false }; clients[index] = { point:undefined, x:0, y:0, r:0, x0:0, y0:0, r0:0, index:index, lastEvent:0, selected:false };
var v = (1.1+Math.sin(index))*1e6; var v = (1.1+Math.sin(index))*1e6;
@ -448,19 +457,23 @@ function renderCanvas() {
var dy = client.y - client.yo; var dy = client.y - client.yo;
var r = Math.sqrt(dx*dx + dy*dy); 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 ((r > 1) && (!client.settled)) {
var a = Math.min(Math.pow(1/r, 0.7), 1); var a = Math.min(Math.pow(f/r, 0.6), 1);
context.strokeStyle = (client.selected) ? 'rgba(238,0,0,'+a+')' : 'rgba(0,0,0,'+a+')';
context.lineWidth = client.r*2*radius; 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.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 );
context.stroke(); context.stroke();
} else { } else {
context.fillStyle = (client.selected) ? '#e00' : '#000'; context.fillStyle = (client.selected) ? 'rgb(238,80,0)' : 'rgb(0,0,0)';
context.beginPath(); context.beginPath();
context.arc(client.x, client.y, client.r*radius, 0, 2*Math.PI, false); context.arc(client.x, client.y, client.r*radius*f, 0, 2*Math.PI, false);
context.fill(); context.fill();
} }
} }