如何在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值以外，所有代码都是相同的。

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.

下面的代码。

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

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

1）如何在HTML画布中合并Material Design中的图标？

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

2）如何合并任何图标字体中的图标（例如 https://github.com/framework7io/framework7-icons ）？

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);
});

推荐答案

使用 FontFace 界面。

字体文件的网址。它的 load（）方法将在字体准备好使用时返回Promise解析。

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屋！