如何在 HTML 画布上渲染图标字体，尤其是 Material Design 图标字体? [英] How to render icon fonts on HTML canvas and Material Design icon fonts in particular?

问题描述

这个精彩的答案详细说明了如何在 HTML 画布中包含来自 FontAwesome 的图标.但是，从 Material Design 调整图标字体的代码是行不通的.除了将 FontAwesome 值替换为 Material Design 值之外，所有代码都是相同的.

代码如下.

Codepen:https://codepen.io/Crashalot/pen/dyyEPWVp>

1) 如何将 Material Design 中的图标合并到 HTML 画布中?

2) 你如何合并来自任何图标字体的图标(例如，https://github.com/framework7io/framework7-icons)?

var FontAwesome = function () {返回新的承诺(功能(完成，失败){变量我 = {}，FACache = {};功能查找(名称){var elm = document.createElement('i');elm.className = 'fa fa-' + name;elm.style.display = '无';document.body.appendChild(elm);var 内容 = window.getComputedStyle(榆树，':之前').getPropertyValue('内容')document.body.removeChild(榆树);返回内容；};me.get = 函数(名称){if (!!FACache[name]) return FACache[name];var c = 查找(名称)[1]；FACache[名称] = c;返回 c;};(功能() {var l = document.createElement('link');l.rel = '样式表';l.onload = 函数 () {document.fonts.load('10px Material Icons').then(函数(e){完成(我)；}).catch(失败)；}l.href = '//fonts.googleapis.com/icon?family=Material+Icons';var h = document.getElementsByTagName('head')[0];h.parentNode.insertBefore(l, h);}());});};字体真棒().then(函数(fa){var canvas = document.getElementById('mycanvas');常量 x = canvas.width/2;常量 y = canvas.height/2;//一切就绪，准备渲染！var ctx = canvas.getContext('2d');ctx.textAlign = "中心";ctx.textBaseline = "中间";ctx.font = '400px 材质图标';ctx.fillText(fa.get("airplanemode_active"), x, y);});

解决方案

使用 FontFace 界面.

它只需要你的字体文件的 url.当字体可以使用时，它的 load() 方法将返回一个 Promise 解析.

const ctx = canvas.getContext('2d');const material_font = new FontFace('material-icons',//以 CSS url() 表示法将 url 传递给文件'网址(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)')；document.fonts.add(material_font);//将它添加到文档的 FontFaceSetconst framework7_font = new FontFace('framework7-icons','url(https://cdn.jsdelivr.net/gh/framework7io/framework7-icons@master/fonts/Framework7Icons-Regular.woff2)');document.fonts.add(framework7_font);//等待字体加载material_font.load().then(() => {//我们可以使用它ctx.fillStyle = '绿色';ctx.font = '20px 材质图标';ctx.fillText('airplanemode_active', 20, 40);}).catch(console.error);framework7_font.load().then(() => {ctx.fillStyle = '蓝色';ctx.font = '20px framework7-icons';ctx.fillText('飞机', 20, 80);}).catch(console.error);

<canvas id="canvas"></canvas>

This wonderful answer details how to include icons from FontAwesome in a HTML canvas. Adapting the code for icon font from Material Design doesn't work, however. All the code is the same except for replacing FontAwesome values for Material Design values.

Code below.

Codepen: https://codepen.io/Crashalot/pen/dyyEPWV

1) How do you incorporate icons from Material Design in HTML canvas?

2) How do you incorporate icons from any icon font (e.g., https://github.com/framework7io/framework7-icons)?

var FontAwesome = function () {
    return new Promise(function (done, failed) {
        var me = {},
            FACache = {};

        function find (name) {
            var elm = document.createElement('i');
            elm.className = 'fa fa-' + name;
            elm.style.display = 'none';
            document.body.appendChild(elm);
            var content = window.getComputedStyle(
                elm, ':before'
            ).getPropertyValue('content')
            document.body.removeChild(elm);
            return content;
        };

        me.get = function (name) {
            if (!!FACache[name]) return FACache[name];
            var c = find(name)[1];
            FACache[name] = c;
            return c;
        };

        (function() {
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.onload = function () {
                document.fonts.load('10px Material Icons')
                    .then(function (e) { done(me); })
                    .catch(failed);
            }
            l.href = '//fonts.googleapis.com/icon?family=Material+Icons';
            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
        }());
    });
};

FontAwesome()
.then(function (fa) {

    var canvas = document.getElementById('mycanvas');
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    // All set, and ready to render!
    var ctx = canvas.getContext('2d');
        ctx.textAlign = "center";
            ctx.textBaseline = "middle";
        ctx.font = '400px Material Icons';
        ctx.fillText(fa.get("airplanemode_active"), x, y);
});

解决方案

Use the FontFace interface.

All it needs is the url of your font file. Its load() method will return a Promise resolving when the font will be ready to use.

const ctx = canvas.getContext('2d');

const material_font = new FontFace( 'material-icons',
  // pass the url to the file in CSS url() notation
  'url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)' );
document.fonts.add( material_font ); // add it to the document's FontFaceSet

const framework7_font = new FontFace( 'framework7-icons',
  'url(https://cdn.jsdelivr.net/gh/framework7io/framework7-icons@master/fonts/Framework7Icons-Regular.woff2)' );
document.fonts.add( framework7_font );

// wait the font loads
material_font.load().then( () => {
  // we're good to use it
  ctx.fillStyle = 'green';
  ctx.font = '20px material-icons';
  ctx.fillText('airplanemode_active', 20, 40);
}).catch( console.error );

framework7_font.load().then( () => {
  ctx.fillStyle = 'blue';
  ctx.font = '20px framework7-icons';
  ctx.fillText('airplane', 20, 80);
}).catch( console.error );

<canvas id="canvas"></canvas>

这篇关于如何在 HTML 画布上渲染图标字体，尤其是 Material Design 图标字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！