Autor Zpráva
návštěvník
Profil *
Objevil jsem tuto knihovnu:
http://getspringy.com/
která vykresluje strom. Jako uzly jsou použity buď obrázky nebo popisky (text). Dobré na ní je že si můžete přidávat uzly a rozšiřovat strom který se pak šíří různými směry. Co jsem ale původně zamýšlel je mít strom, kde budu mít ikony a když na nějakou ikonu najedu myší, tak se ta ikona má překrýt jiným obrázkem zvýrazňující tu ikonu. Plus, pokud je ikona vybrána tak bych chtěl aby se taky změnila barva ikony. Níže je uvedený kód z knihovny, který má vykreslovat buď text nebo obrázek. A potřeboval bych poradit
1) jak to udělat abych viděl ikonu a pod ní text.
2) jak to udělat když chci překreslit ikonu jinou ikonou.

var ctx = canvas.getContext("2d");

function drawNode(node, p) {
    var s = toScreen(p);
    ctx.save();

    var paddingX = 6;
    var paddingY = 6;

    var contentWidth = node.getWidth();
    var contentHeight = node.getHeight();
    var boxWidth = contentWidth + paddingX;
    var boxHeight = contentHeight + paddingY;
  
    ctx.clearRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight);

  // fill background
    if (selected !== null && selected.node !== null && selected.node.id === node.id) {
        ctx.fillStyle = "#f8ff80";
    } else if (nearest !== null && nearest.node !== null && nearest.node.id === node.id) {
        ctx.fillStyle = "#0EEEEE";
    } else {
        ctx.fillStyle = "#c7fbd6";
    }
    ctx.fillRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight);

    if (node.data.image == undefined) {
        ctx.textAlign = "left";
        ctx.textBaseline = "top";
        ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
        ctx.fillStyle = (node.data.color !== undefined) ? node.data.color : "#000000";
        var text = (node.data.label !== undefined) ? node.data.label : node.id;

    ctx.fillText(text, s.x - contentWidth/2, s.y - contentHeight/2);
    } else {
        // Currently we just ignore any labels if 
    // the image object is set. One might want 
    // to extend this logic to allow for both,
    // or other composite nodes.
        var src = node.data.image.src;  // There should probably be a sanity check here too, but un-src-ed images aren't exaclty a disaster.
        if (src in nodeImages) {
            if (nodeImages[src].loaded) {
                ctx.drawImage(nodeImages[src].object, s.x - contentWidth/2, s.y - contentHeight/2, contentWidth, contentHeight);
            }
        }else{
       // First time seeing an image with 
      // this src address, so add it to 
      // our set of image objects
            nodeImages[src] = {};
            var img = new Image();
            nodeImages[src].object = img;
            img.addEventListener("load", function () {
                // HTMLImageElement objects are loaded, so we set a flag when it is done
                nodeImages[src].loaded = true;
            });
            img.src = src;
        }
    }
    ctx.restore();
}

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: