我如何使用‘烬-`emojione’和‘`emojione png-sprites`’？

Question

我使用余烬-表情来显示和插入表情符号。

在EmojiOne提供的四种呈现选项中：

• PNG精灵
• PNG个人图像
• SVG精灵
• SVG个别图像

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

不幸的是，EmojiOne只提供三种大小的spritesheets : 64、128和512 px。我们需要显示20 px大小的表情符号。

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

ember-emojione自述建议这次攻击来调整PNG精灵表情符号的大小：

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

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

• 在某些情况下，表情符号看起来很模糊。
• 文本选择失败：

​

解决方案是使用针对所需大小的emoji spritesheets。Deveo/emojione-png-精灵回购提供了这样的spritesheets。

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

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

Answer 1

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

1. 决定从emojione-png-sprites中包含哪些spritesheets。 我们将使用20 We表情符号。对于视网膜，我们还需要双倍和三倍大小的飞碟。由于40 As和60 As不可用，我们将使用下一个可用的：48 As和64 As。
2. 将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-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-型态=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.01/dist/style.scss 非常重要的是，要使用特定版本的文件，以便锁定依赖项。否则，如果回购有一个突破性的变化，一个无辜的bower install将破坏您的项目。
3. 告诉ember-emojione不要包含默认的EmojiOne、CSS和spritesheets。在应用程序的ember-cli-build.js中： module.exports =函数(默认值){ var app =新EmberApp(默认值，{“成员-表情”：{ shouldImportCss: false，shouldIncludePngSprite: false，shouldIncludeSvgSprite: false，shouldIncludePngImages: false，shouldIncludeSvgImages: false })；// .
4. 将PNG精灵导入您的应用程序。 安装broccoli-funnel： 安装-D花椰菜漏斗 在应用程序的ember-cli-build.js中： var Funnel =需要量(“花椰菜-漏斗”)；module.exports =函数(默认值){ var app =新的EmberApp(默认值，{ // .} })；const漏斗=[ // PNG精灵新漏斗“(app.bowerDirectory+ "/emojione-png-sprite-20”)，{包括：'index.png'，getDestinationPath () {退回“资产/表情素-png-精灵-20.png”；)，新漏斗(app.bowerDirectory+ "/emojione-png-sprite-48“)，{包括：'index.png'，getDestinationPath () { new”资产/emojione png-sprites/sprite-48.png“；( })，新漏斗(app.bowerDirectory+“/emojione-png 64”，{包括：'index.png'，getDestinationPath () { return /emojione-png-sprites/sprite-64.png“；})；]；if (app.env === "development“而论){ app.import(app.bowerDirectory +)/app.import/lib/timekeeper.js”；}返回app.toTree(漏斗)；}；
5. 在应用程序的Sass中，包含混合内容并调用它： @import "bower_components/emojione-png-sprite-style/index.scss"；@包括sprity-emojione(20，"/assets/emojione-png-sprites"，(2: 48，3: 64))；
6. 这将破坏ember-emojione组件的外观。该副词包含一个混合元素，用于恢复外观： @import 'node_modules/ember-emojione/app/styles/ember-emojione'；@包括emojione取消-刻度；