Autor Zpráva
návštěvník
Profil *
Napsal jsem si funkci která by měla tisknout jednotlivé znaky z textu v proměnné do canvas. Nastav9te si dva fonty, první font je Lucida Console tučný druhý Lucida Console normal. Styl barvy by měl bílý pro tlustý font a černý pro normální font.

Změřím šířku písmena a vrátím rozdíl mezi těmi dvěmi šířkami tlustého a normálního fontu. Pak volám tuto funkci, která by měla vytisknout text. Zvláštní je, že když to spustím poprvé tak se mi nic nezobrazí. Když zruším vyhození chyby tak to jako jede i když špatně a velmi pomalu. A tak se ptám:
1) proč to poprvé nic nevytiskne, ačkoliv podle hlášek z konzoly by vše mělo být vidět
2) proč to jede tak děsně pomalu?

Aby bylo jasno proč tisknu text po písmenkách: protože normální text má menší šířku než tlustý, takže provádím korekci na ose x.

      function drawChars(textTypeLocal){
        var textTypeLocal;
              var text = (node.data.label !== undefined) ? node.data.label : node.id;
        ctx.textAlign = "left";
              ctx.textBaseline = "top";
        if ( textTypeLocal == 1 ){
          var xOrigin = s.x - contentWidth/2;
          var yOrigin = s.y - contentHeight/2;
        }
        else {
          var x1_origin = s.x - contentWidth/2;
          var x2_origin = x1_origin;
          // x1:background font; x2:front font
          var yOrigin = s.y + contentHeight/2 + paddingY;        
          var yOrigin;
        }
        
        var x = null; var y = null;
        // Set Background font color        
        var style_1 = (node.data.color !== undefined) ? node.data.backColor : nodeFontColorBg;
        // Set Background font
        var font_1 = (node.data.fontBackground !== undefined) ? node.data.fontBackground : 
              (nodeFontBg !== undefined)?nodeFontBg:undefined;
          
        if ( ctx.font !== undefined )
          {
                  // Set front font color
          var style_2 = (node.data.color !== undefined) ? node.data.color : nodeFontColor;        
          // Set front font
          var font_2 = (node.data.font !== undefined) ? node.data.font : nodeFontFg;
          }        
        
        for( var i=1; i<=text.length; ++i )
        {
          x1 = x1_origin + fontCharWidth*i - fontCharWidth;                  
          x2 = x2_origin + (fontCharWidth-fontCharDiff)*i - (fontCharWidth-fontCharDiff);                  

          
          console.log("text: " + text);
          console.log("i: " + i);
          console.log("fontCharWidth*i: " + (fontCharWidth*i));
          console.log("x1_origin: " + x1_origin);
          console.log("x2_origin: " + x2_origin);
          console.log("x1: " + x1);
          console.log("x2: " + x2);
          console.log("yOrigin: " + yOrigin);
                   
          ctx.fillStyle = style_1;
          ctx.font = font_1;
          ctx.fillText(text[i-1], x1, yOrigin);  

          ctx.fillStyle = style_2;
          ctx.font = font_2;          
          ctx.fillText(text[i-1], x2, yOrigin);  

        }
      // ctx.save();
      // ctx.restore();
      throw new Error("End of test");

      };
návštěvník
Profil *
Vyřešeno. Smazal jsem to protože jsem našel funkci .stroke();

Pozn:
Díky funkci stroke vytvořím kolem tmavého písma světlé podsvícení, ale zdá se že je ta funkce pomalejší a méně přesná než .fillText a proto u mě prakticky nepoužitelné. Zpomaluje mi to běh aplikace, že se trochu kouše.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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