Changeset 13563


Ignore:
Timestamp:
05/04/12 19:53:20 (13 years ago)
Author:
tbretz
Message:
Fixed a problem with firefox; added drawing of the full camera; use translations for drawing; replaced discs by hexagons
File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/FACT++/www/index.js

    r13526 r13563  
    243243        return;
    244244
     245    var h = $("table"+z).offsetHeight;
     246    if (h == 0)
     247        return;
     248
    245249    var W = window.innerWidth;
    246250    var H = window.innerHeight;
    247251
    248     //img.width  = 1;
    249     //img.height = 1;
    250 
    251     var h = $("table"+z).offsetHeight;
    252 
    253     //alert(img.height+"/"+img.offsetHeight+"/"+img.parentNode.offsetHeight);
    254 
    255     // Be aware that this is recursive!
    256     img.width   = W;
    257     img.height += H - h;
    258 
    259     canv.width  = img.width;
    260     canv.height = img.height;
     252    var ih = img.height + H - h;
     253
     254    img.style.width = W +"px";
     255    img.style.height= ih+"px";
     256
     257    canv.width  = W;
     258    canv.height = ih;
    261259
    262260    // ------ debug -----
     
    264262    $('debug').innerHTML += "|W="+W +"/"+H;
    265263    $('debug').innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight;
     264    $('debug').innerHTML += "|I="+ih;
    266265}
    267266
     
    708707}
    709708
    710 function drawPix(x, y, col)
    711 {
    712     var z = $("body").getAttribute("data-visible");
     709function drawHex(ctx, x, y, col)
     710{
     711    ctx.fillStyle = "#"+color(col);
     712
     713    ctx.save();
     714
     715    ctx.translate(x, y);
     716    ctx.scale(1/2, Math.sqrt(3)/6);
     717
     718    ctx.beginPath();
     719    ctx.moveTo( 1,  1);
     720    ctx.lineTo( 0,  2);
     721    ctx.lineTo(-1,  1);
     722    ctx.lineTo(-1, -1);
     723    ctx.lineTo( 0, -2);
     724    ctx.lineTo( 1, -1);
     725    ctx.fill();
     726
     727    ctx.restore();
     728}
     729
     730function drawDisc(ctx, x, y, r, col)
     731{
     732    ctx.fillStyle = "#"+color(col);
     733
     734    ctx.save();
     735
     736    ctx.translate(x, y);
     737
     738    ctx.beginPath();
     739    ctx.arc(0, 0, r, 0, Math.PI*2, true);
     740    ctx.fill();
     741
     742    ctx.restore();
     743}
     744
     745function beginDrawCam(scale)
     746{
     747    var z    = $("body").getAttribute("data-visible");
    713748    var canv = $("canvas"+z);
    714749
    715     var cw = canv.width;
    716     var ch = canv.height;
    717 
    718     var w = Math.min(cw/28, ch/28);
    719 
    720     var ctx  = canv.getContext("2d");
    721 
    722     ctx.beginPath();
    723     ctx.arc(x*w*2+cw/2, y*w*2+ch/2, w, 0, Math.PI*2, true);
    724     ctx.lineWidth = 0;
    725     ctx.fillStyle = "#"+color(col);
    726     ctx.fill();
    727     ctx.closePath();
    728 }
     750    var w = Math.min(canv.width/scale, canv.height/scale);
     751
     752    var ctx = canv.getContext("2d");
     753
     754    ctx.save();
     755    ctx.translate(canv.width/2, canv.height/2);
     756    ctx.scale(w*2, w*2);
     757
     758    return ctx;
     759}
     760
     761function drawFullCam(data)
     762{
     763    var ctx = beginDrawCam(80);
     764
     765    drawHex(ctx, -0.5, 0, data.charCodeAt(0));
     766
     767    var gsSin60 = Math.sqrt(3)/2;
     768
     769    var cnt  = 1;
     770    for (var ring=1; ring<=23; ring++)
     771    {
     772        for (var s=0; s<6; s++)
     773        {
     774            for (var i=1; i<=ring; i++)
     775            {
     776                var x=0.;
     777                var y=0.;
     778
     779                switch (s)
     780                {
     781                case 0: x = ring-i*0.5;    y = i*gsSin60;         break;
     782                case 1: x = ring*0.5-i;    y = ring*gsSin60;      break;
     783                case 2: x = -(ring+i)*0.5; y = (ring-i)*gsSin60;  break;
     784                case 3: x = 0.5*i-ring;    y = -i*gsSin60;        break;
     785                case 4: x = i-ring*0.5;    y = -ring*gsSin60;     break;
     786                case 5: x = (ring+i)*0.5;  y = (-ring+i)*gsSin60; break;
     787                }
     788
     789                if (x*x + y*y - x > 395.75)
     790                    continue;
     791
     792                drawHex(ctx, x-0.5, -y, data.charCodeAt(cnt));
     793                cnt++;
     794
     795                if (cnt!=1416)
     796                    continue;
     797
     798                drawHex(ctx, -6.5, -y, data.charCodeAt(1438));
     799                drawHex(ctx, -6.5,  y, data.charCodeAt(1439));
     800            }
     801        }
     802    }
     803
     804    ctx.restore();
     805}
     806
    729807function drawCam(data)
    730808{
    731     drawPix(0, 0, data.charCodeAt(0));
     809    var ctx = beginDrawCam(28);
     810    ctx.rotate(Math.PI/6);
     811
     812    drawHex(ctx, 0, 0, data.charCodeAt(0));
    732813
    733814    var gsSin60 = Math.sqrt(3)/2;
     
    764845                    continue;
    765846
    766                 // Rotate by 60deg
    767                 var px = gsSin60*x - 0.5*y;
    768                 var py = gsSin60*y + 0.5*x;
    769 
    770                 drawPix(px, py, data.charCodeAt(cnt));
     847                drawHex(ctx, x, y, data.charCodeAt(cnt));
    771848                cnt++;
    772849            }
    773850        }
    774851    }
     852
     853    ctx.restore();
    775854}
    776855
     
    882961    drawGraph(canv, result);
    883962
    884     drawCam(result);
    885     drawCamLegend(canv);
     963//    drawCam(result);
     964//    drawFullCam(result);
     965//    drawFullCam(result);
     966//    drawCamLegend(canv);
    886967
    887968    $("image"+z).src = canv.toDataURL("image/png");
Note: See TracChangeset for help on using the changeset viewer.