Question

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

EmojiOne提供的四种渲染选项：

PNG sprites
PNG个人图片
SVG sprites
SVG个人图片

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

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

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

ember-emojione自述文件建议调整PNG精灵表情符号的大小：

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

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

在某些情况下，表情符号会显得模糊。
文字选择爆炸：

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

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

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

Answer 1

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

决定从emojione-png-sprites包含哪些spritesheets。

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

将spritesheets和Sass文件包含在您的仓库中。在您的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

使用特定版本的文件非常重要，这样您的依赖项就会被锁定。否则，如果回购有重大改变，无辜的bower install会破坏您的项目。

告诉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
        }
    });
// ...

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

在你的应用程序的Sass中，包含mixin并调用它：

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

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

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

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

@include ember-emojione-cancel-scale;

如何使用`emojione-png-sprites`的'ember-emojione`？

1 个答案: