1

我正在使用ember-emojione来显示和插入表情符号。

在 EmojiOne 提供的四种渲染选项中：

  • PNG精灵
  • PNG单个图像
  • SVG 精灵
  • SVG 单个图像

...只有 PNG 精灵适合我。单个图像需要太多时间来加载和按顺序显示表情符号。SVG sprite 很棒，但是重新渲染预览区域会导致 SVG sprite emoji 闪烁。只有 PNG sprite emoji 不会同时闪烁和显示。

不幸的是，EmojiOne 仅提供三种尺寸的精灵表：64、128 和 512 像素。我们需要以 20 像素大小显示表情符号。

调整通过 PNG 精灵显示的表情符号的大小是有问题的。

ember-emojione自述文件建议使用此 hack 来调整 PNG sprite emoji 的大小：

.emojione {
  transform: scale(0.3125);
  margin: -22px;
}

它有效，但它有一些缺点：

  • 在某些情况下，表情符号显得模糊。

  • 文本选择爆炸：

    在此处输入图像描述

解决方案是使用适合所需大小的表情符号精灵表。Deveo /emojione-png-sprites repo 提供了这样的 spritesheets。

但是当我包含这些 spritesheets 而不是默认的 spritesheets 时，ember-emojione表情符号选择器组件显示不正确。

问题：如何正确使用ember-emojionewith emojione-png-sprites？

4

1 回答 1

1

emojione-png-sprites依赖于 Sass mixins，所以你需要ember-cli-sass. 如果您不想安装ember-cli-sass，您也可以手动预编译 mixin 调用并将生成的 CSS 插入您的应用程序。

  1. 确定要包含的精灵表emojione-png-sprites。

    我们将使用20 像素的表情符号。对于视网膜，我们还需要两倍和三倍大小的精灵表。由于 40px 和 60px 不可用，我们将使用下一个可用的：48px和64px。

  2. 将 spritesheets 和 Sass 文件包含到您的 repo 中。在您的 Ember 应用根目录中运行以下命令：

    bower i -S emojione-png-sprite-20=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-20.png
bower i -S emojione-png-sprite-48=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-48.png
bower i -S emojione-png-sprite-64=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-64.png
bower i -S emojione-png-sprite-style=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.01/dist/style.scss

    使用文件的特定发行版本非常重要，这样您的依赖关系就会被锁定。否则，如果 repo 有重大更改，无辜者bower install会破坏您的项目。

  3. 告诉ember-emojione不要包含默认的 EmojiOne CSS 和 spritesheets。在您的应用程序中ember-cli-build.js：

    module.exports = function (defaults) {
    var app = new EmberApp(defaults, {    
        "ember-emojione": {
            shouldImportCss:        false,
            shouldIncludePngSprite: false,
            shouldIncludeSvgSprite: false,
            shouldIncludePngImages: false,
            shouldIncludeSvgImages: false
        }
    });
// ...

  4. 将 PNG 精灵导入您的应用程序。

    安装broccoli-funnel：

    npm install -D broccoli-funnel

    在您的应用程序中ember-cli-build.js：

    var Funnel = require("broccoli-funnel");

module.exports = function (defaults) {
    var app = new EmberApp(defaults, {
            // ...
        }
    });

    const funnels = [

        // PNG sprites
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-20", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-20.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-48", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-48.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-64", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-64.png";
            }
        }),
    ];

    if (app.env === "development" || app.env === "test") {
        app.import(app.bowerDirectory + "/timekeeper/lib/timekeeper.js");
    }

    return app.toTree(funnels);
};

  5. 在你应用的 Sass 中，包含 mixin 并调用它：

    @import "bower_components/emojione-png-sprite-style/index.scss";

@include sprity-emojione(20, "/assets/emojione-png-sprites", (2: 48, 3: 64));

  6. 这将破坏ember-emojione组件的外观。该插件包含一个可以恢复外观的 mixin：

    @import 'node_modules/ember-emojione/app/styles/ember-emojione';

@include ember-emojione-cancel-scale;
于 2017-03-02T14:38:31.590 回答