All geek questions in one place

Raphael - Change the color of a letter in a text string

(using Raphael_2.01, WindowsXP, Firefox8.0.1)

Hello,

I am trying to change the color of the text of the letter, referring to "Drawing Text" http://www.html5rocks.com/en/tutorials/raphael/intro/ .

I can display the text "HTML5ROCKS", but I cannot change the color.

var t = paper.text(50, 10, "HTML5ROCKS"); var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Courier"), 40); // I think "Vegur" is Mac font. So I change it to "Courier". letters[4].attr({fill:"orange"}); for (var i = 5; i < letters.length; i++) { letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"}); }

What happened?

+1
source share
1 answer

As the tutorial says (not as clear as it should), you need to convert the font to the cufon format if you want to treat individual letters as unique SVG paths. If you do, the paper.print function works as expected. Without this, the print function returns an empty array (and the "letter [4]" fails).

Experimentally, I grabbed two missing font files from html5rocks:
 <script src="Vegur.font.js"></script> <script src="cufon.js"></script>

and added them to a sample HTML page:

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Raphaël—JavaScript Library</title> </head> <body> <div id="demo-1"></div> <script src="raphael.js" type="text/javascript"></script> <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="Scripts/Vegur.font.js" type="text/javascript"></script> <script src="Scripts/cufon.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var paper = Raphael("demo-1", 320, 200); var t = paper.text(50, 10, "HTML5ROCKS"); var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40); letters[4].attr({ fill: "orange" }); for (var i = 5; i < letters.length; i++) { letters[i].attr({ fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D" }); } }); </script> </body> </html>

The second HTML5ROCKS text is marked as expected (as shown on the tutorial's original page).

+2
source

Source: https://habr.com/ru/post/900361/

More articles:


All Articles