Chromium中使用vector icons


发布于 2021-08-20


chromium中可以使用skia绘制矢量图片。矢量图片有更好的缩放效果,还可以动态的改变颜色,占用更小的大学。

chromium中使用.icon的文件来描述一个vector icons。在编译的时候,.icon文件中的内容会被转换成代码到.cc文件中,从而编译到二进制文件里。

转换svg格式到icon格式

一个svg文件的内容如下:

<svg t="1629086259061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3703" width="200" height="200"><path d="M753.648 345.664l97.072-100.192c23.2-23.936 55.68-32.56 82.608-20.096 25.952 11.504 42.672 37.328 42.672 68.96v447.296c0 31.616-16.72 57.472-42.672 68.96-8.368 3.84-17.632 4.8-25.984 4.8-20.416 0-39.904-8.64-56.624-25.872l-97.072-99.568v52.672c0 36.432-13.872 71.392-38.576 97.152C690.368 865.536 656.864 880 621.92 880H179.744c-34.944 0-68.448-14.448-93.168-40.224C61.872 814.016 48 779.04 48 742.608V281.392c0-36.432 13.872-71.392 38.576-97.152C111.296 158.464 144.816 143.984 179.744 144H621.92c34.944 0 68.464 14.464 93.168 40.24 24.704 25.76 38.56 60.72 38.56 97.152v64.272z m0 97.712v149.168l144.4 148.128c5.584 5.76 9.28 5.76 10.192 5.76 0.928 0 1.872-1.92 1.872-5.76V294.336c0-3.84-0.944-5.76-1.872-5.76-0.928 0-5.568 0-10.192 5.76l-144.4 149.04zM179.744 212.208c-36.064 0.16-65.28 30.608-65.408 68.24v461.216c0.16 37.6 29.344 68.064 65.408 68.208H621.92c36.064-0.16 65.264-30.608 65.392-68.208V281.392c-0.128-37.6-29.328-68.064-65.392-68.224H179.744v-0.96zM256 389.088C256 368.608 273.92 352 296 352s40 16.608 40 37.088v261.824C336 671.392 318.08 688 296 688S256 671.392 256 650.912V389.088z m192 0C448 368.608 465.92 352 488 352s40 16.608 40 37.088v261.824C528 671.392 510.08 688 488 688S448 671.392 448 650.912V389.088z" fill="#000000" p-id="3704"></path></svg>

打开skiafy 页面,把svg内容复杂粘贴到文本框,然后点击skiafy按钮,下面就会输出转换后的icon文件内容。

CANVAS_DIMENSIONS, 1024,
MOVE_TO, 753.65f, 345.66f,
R_LINE_TO, 97.07f, -100.19f,
R_CUBIC_TO, 23.2f, -23.94f, 55.68f, -32.56f, 82.61f, -20.1f,
R_CUBIC_TO, 25.95f, 11.5f, 42.67f, 37.33f, 42.67f, 68.96f,
R_V_LINE_TO, 447.3f,
R_CUBIC_TO, 0, 31.62f, -16.72f, 57.47f, -42.67f, 68.96f,
R_CUBIC_TO, -8.37f, 3.84f, -17.63f, 4.8f, -25.98f, 4.8f,
R_CUBIC_TO, -20.42f, 0, -39.9f, -8.64f, -56.62f, -25.87f,
R_LINE_TO, -97.07f, -99.57f,
R_V_LINE_TO, 52.67f,
R_CUBIC_TO, 0, 36.43f, -13.87f, 71.39f, -38.58f, 97.15f,
CUBIC_TO, 690.37f, 865.54f, 656.86f, 880, 621.92f, 880,
H_LINE_TO, 179.74f,
R_CUBIC_TO, -34.94f, 0, -68.45f, -14.45f, -93.17f, -40.22f,
CUBIC_TO, 61.87f, 814.02f, 48, 779.04f, 48, 742.61f,
V_LINE_TO, 281.39f,
R_CUBIC_TO, 0, -36.43f, 13.87f, -71.39f, 38.58f, -97.15f,
CUBIC_TO, 111.3f, 158.46f, 144.82f, 143.98f, 179.74f, 144,
H_LINE_TO, 621.92f,
R_CUBIC_TO, 34.94f, 0, 68.46f, 14.46f, 93.17f, 40.24f,
R_CUBIC_TO, 24.7f, 25.76f, 38.56f, 60.72f, 38.56f, 97.15f,
R_V_LINE_TO, 64.27f,
CLOSE,
R_MOVE_TO, 0, 97.71f,
R_V_LINE_TO, 149.17f,
R_LINE_TO, 144.4f, 148.13f,
R_CUBIC_TO, 5.58f, 5.76f, 9.28f, 5.76f, 10.19f, 5.76f,
R_CUBIC_TO, 0.93f, 0, 1.87f, -1.92f, 1.87f, -5.76f,
V_LINE_TO, 294.34f,
R_CUBIC_TO, 0, -3.84f, -0.94f, -5.76f, -1.87f, -5.76f,
R_CUBIC_TO, -0.93f, 0, -5.57f, 0, -10.19f, 5.76f,
R_LINE_TO, -144.4f, 149.04f,
CLOSE,
MOVE_TO, 179.74f, 212.21f,
R_CUBIC_TO, -36.06f, 0.16f, -65.28f, 30.61f, -65.41f, 68.24f,
R_V_LINE_TO, 461.22f,
R_CUBIC_TO, 0.16f, 37.6f, 29.34f, 68.06f, 65.41f, 68.21f,
H_LINE_TO, 621.92f,
R_CUBIC_TO, 36.06f, -0.16f, 65.26f, -30.61f, 65.39f, -68.21f,
V_LINE_TO, 281.39f,
R_CUBIC_TO, -0.13f, -37.6f, -29.33f, -68.06f, -65.39f, -68.22f,
H_LINE_TO, 179.74f,
R_V_LINE_TO, -0.96f,
CLOSE,
MOVE_TO, 256, 389.09f,
CUBIC_TO, 256, 368.61f, 273.92f, 352, 296, 352,
R_CUBIC_TO, 22.08f, 0, 40, 16.61f, 40, 37.09f,
R_V_LINE_TO, 261.82f,
CUBIC_TO, 336, 671.39f, 318.08f, 688, 296, 688,
CUBIC_TO_SHORTHAND, 256, 671.39f, 256, 650.91f,
V_LINE_TO, 389.09f,
CLOSE,
R_MOVE_TO, 192, 0,
CUBIC_TO, 448, 368.61f, 465.92f, 352, 488, 352,
R_CUBIC_TO, 22.08f, 0, 40, 16.61f, 40, 37.09f,
R_V_LINE_TO, 261.82f,
CUBIC_TO, 528, 671.39f, 510.08f, 688, 488, 688,
CUBIC_TO_SHORTHAND, 448, 671.39f, 448, 650.91f,
V_LINE_TO, 389.09f,
CLOSE

然后把文件内容保存到以icon为后缀名的文本文件里即可。

chromium创建vector_icons工程

参考其他的vector_icons工程。

创建一个工程gn文件:

import("//components/vector_icons/vector_icons.gni")

aggregate_vector_icons2("yes_vector_icons") {
  icon_directory = "."

  sources = [
    "record.icon",
    "recording.icon",
  ]
}

source_set("vector_icons") {
  sources = get_target_outputs(":yes_vector_icons")

  deps = [
    ":yes_vector_icons",
    "//skia",
  ]
}

添加文件vector_icons.h.template

// vector_icons.h.template is used to generate vector_icons.h. Edit the former
// rather than the latter.

#ifndef YES_COMPONENTS_VECTOR_ICONS_VECTOR_ICONS_H_
#define YES_COMPONENTS_VECTOR_ICONS_VECTOR_ICONS_H_

namespace gfx {
struct VectorIcon;
}

#define VECTOR_ICON_TEMPLATE_H(icon_name) \
extern const gfx::VectorIcon icon_name;

namespace yes {

TEMPLATE_PLACEHOLDER

}  // namespace yes

#undef VECTOR_ICON_TEMPLATE_H

#endif  // YES_COMPONENTS_VECTOR_ICONS_VECTOR_ICONS_H_

vector_icons.cc.template

// vector_icons.cc.template is used to generate vector_icons.cc. Edit the former
// rather than the latter.

#include "yes/components/vector_icons/vector_icons.h"

#include "components/vector_icons/cc_macros.h"
#include "ui/gfx/vector_icon_types.h"

#define DECLARE_VECTOR_COMMAND(x) using gfx::x;
DECLARE_VECTOR_COMMANDS

namespace yes {

TEMPLATE_PLACEHOLDER

}  // namespace yes

编译后会生成vector_icons.h

// vector_icons.h.template is used to generate vector_icons.h. Edit the former
// rather than the latter.

#ifndef YES_COMPONENTS_VECTOR_ICONS_VECTOR_ICONS_H_
#define YES_COMPONENTS_VECTOR_ICONS_VECTOR_ICONS_H_

namespace gfx {
struct VectorIcon;
}

#define VECTOR_ICON_TEMPLATE_H(icon_name) \
extern const gfx::VectorIcon icon_name;

namespace yes {

VECTOR_ICON_TEMPLATE_H(kRecordingIcon)
VECTOR_ICON_TEMPLATE_H(kRecordIcon)

}  // namespace yes

#undef VECTOR_ICON_TEMPLATE_H

#endif  // YES_COMPONENTS_VECTOR_ICONS_VECTOR_ICONS_H_

vector_icons.cc

// vector_icons.cc.template is used to generate vector_icons.cc. Edit the former
// rather than the latter.

#include "yes/components/vector_icons/vector_icons.h"

#include "components/vector_icons/cc_macros.h"
#include "ui/gfx/vector_icon_types.h"

#define DECLARE_VECTOR_COMMAND(x) using gfx::x;
DECLARE_VECTOR_COMMANDS

namespace yes {

VECTOR_ICON_REP_TEMPLATE(kRecordingPath, CANVAS_DIMENSIONS, 1024,
MOVE_TO, 753.65f, 345.66f,
R_LINE_TO, 97.07f, -100.19f,
R_CUBIC_TO, 23.2f, -23.94f, 55.68f, -32.56f, 82.61f, -20.1f,
R_CUBIC_TO, 25.95f, 11.5f, 42.67f, 37.33f, 42.67f, 68.96f,
R_V_LINE_TO, 447.3f,
R_CUBIC_TO, 0, 31.62f, -16.72f, 57.47f, -42.67f, 68.96f,
R_CUBIC_TO, -8.37f, 3.84f, -17.63f, 4.8f, -25.98f, 4.8f,
R_CUBIC_TO, -20.42f, 0, -39.9f, -8.64f, -56.62f, -25.87f,
R_LINE_TO, -97.07f, -99.57f,
R_V_LINE_TO, 52.67f,
R_CUBIC_TO, 0, 36.43f, -13.87f, 71.39f, -38.58f, 97.15f,
CUBIC_TO, 690.37f, 865.54f, 656.86f, 880, 621.92f, 880,
H_LINE_TO, 179.74f,
R_CUBIC_TO, -34.94f, 0, -68.45f, -14.45f, -93.17f, -40.22f,
CUBIC_TO, 61.87f, 814.02f, 48, 779.04f, 48, 742.61f,
V_LINE_TO, 281.39f,
R_CUBIC_TO, 0, -36.43f, 13.87f, -71.39f, 38.58f, -97.15f,
CUBIC_TO, 111.3f, 158.46f, 144.82f, 143.98f, 179.74f, 144,
H_LINE_TO, 621.92f,
R_CUBIC_TO, 34.94f, 0, 68.46f, 14.46f, 93.17f, 40.24f,
R_CUBIC_TO, 24.7f, 25.76f, 38.56f, 60.72f, 38.56f, 97.15f,
R_V_LINE_TO, 64.27f,
CLOSE,
R_MOVE_TO, 0, 97.71f,
R_V_LINE_TO, 149.17f,
R_LINE_TO, 144.4f, 148.13f,
R_CUBIC_TO, 5.58f, 5.76f, 9.28f, 5.76f, 10.19f, 5.76f,
R_CUBIC_TO, 0.93f, 0, 1.87f, -1.92f, 1.87f, -5.76f,
V_LINE_TO, 294.34f,
R_CUBIC_TO, 0, -3.84f, -0.94f, -5.76f, -1.87f, -5.76f,
R_CUBIC_TO, -0.93f, 0, -5.57f, 0, -10.19f, 5.76f,
R_LINE_TO, -144.4f, 149.04f,
CLOSE,
MOVE_TO, 179.74f, 212.21f,
R_CUBIC_TO, -36.06f, 0.16f, -65.28f, 30.61f, -65.41f, 68.24f,
R_V_LINE_TO, 461.22f,
R_CUBIC_TO, 0.16f, 37.6f, 29.34f, 68.06f, 65.41f, 68.21f,
H_LINE_TO, 621.92f,
R_CUBIC_TO, 36.06f, -0.16f, 65.26f, -30.61f, 65.39f, -68.21f,
V_LINE_TO, 281.39f,
R_CUBIC_TO, -0.13f, -37.6f, -29.33f, -68.06f, -65.39f, -68.22f,
H_LINE_TO, 179.74f,
R_V_LINE_TO, -0.96f,
CLOSE,
MOVE_TO, 256, 389.09f,
CUBIC_TO, 256, 368.61f, 273.92f, 352, 296, 352,
R_CUBIC_TO, 22.08f, 0, 40, 16.61f, 40, 37.09f,
R_V_LINE_TO, 261.82f,
CUBIC_TO, 336, 671.39f, 318.08f, 688, 296, 688,
CUBIC_TO_SHORTHAND, 256, 671.39f, 256, 650.91f,
V_LINE_TO, 389.09f,
CLOSE,
R_MOVE_TO, 192, 0,
CUBIC_TO, 448, 368.61f, 465.92f, 352, 488, 352,
R_CUBIC_TO, 22.08f, 0, 40, 16.61f, 40, 37.09f,
R_V_LINE_TO, 261.82f,
CUBIC_TO, 528, 671.39f, 510.08f, 688, 488, 688,
CUBIC_TO_SHORTHAND, 448, 671.39f, 448, 650.91f,
V_LINE_TO, 389.09f,
CLOSE)
VECTOR_ICON_TEMPLATE_CC(kRecordingRepList, kRecordingIcon, {kRecordingPath, base::size(kRecordingPath)})
VECTOR_ICON_REP_TEMPLATE(kRecordPath, CANVAS_DIMENSIONS, 1024,
MOVE_TO, 752, 347.31f,
R_LINE_TO, 96.74f, -97.68f,
R_CUBIC_TO, 23.57f, -23.79f, 56.54f, -32.37f, 83.9f, -20,
R_CUBIC_TO, 26.38f, 11.46f, 43.36f, 37.12f, 43.36f, 68.56f,
V_LINE_TO, 742.72f,
R_CUBIC_TO, 0, 31.41f, -16.98f, 57.12f, -43.36f, 68.51f,
R_CUBIC_TO, -8.48f, 3.82f, -17.9f, 4.77f, -26.4f, 4.77f,
R_CUBIC_TO, -20.72f, 0, -40.51f, -8.58f, -57.5f, -25.7f,
LINE_TO, 752, 693.23f,
R_V_LINE_TO, 49.39f,
R_CUBIC_TO, 0, 36.43f, -13.86f, 71.39f, -38.5f, 97.15f,
R_CUBIC_TO, -24.64f, 25.76f, -58.08f, 40.22f, -92.93f, 40.22f,
H_LINE_TO, 179.44f,
R_CUBIC_TO, -34.86f, 0, -68.29f, -14.45f, -92.96f, -40.22f,
CUBIC_TO, 61.86f, 814.02f, 48, 779.04f, 48, 742.61f,
V_LINE_TO, 281.39f,
R_CUBIC_TO, 0, -36.43f, 13.84f, -71.39f, 38.5f, -97.15f,
CUBIC_TO, 111.14f, 158.46f, 144.58f, 143.98f, 179.44f, 144,
R_H_LINE_TO, 441.14f,
R_CUBIC_TO, 34.86f, 0, 68.3f, 14.46f, 92.94f, 40.24f,
R_CUBIC_TO, 24.64f, 25.76f, 38.5f, 60.72f, 38.48f, 97.15f,
R_V_LINE_TO, 65.92f,
CLOSE,
R_MOVE_TO, 0, 97.12f,
R_V_LINE_TO, 152,
R_LINE_TO, 144.82f, 145.33f,
R_CUBIC_TO, 5.66f, 5.71f, 9.41f, 5.71f, 10.35f, 5.71f,
R_CUBIC_TO, 0.96f, 0, 1.89f, -1.9f, 1.89f, -5.71f,
V_LINE_TO, 298.19f,
R_CUBIC_TO, 0, -3.81f, -0.94f, -5.71f, -1.89f, -5.71f,
R_CUBIC_TO, -0.95f, 0, -5.65f, 0, -10.35f, 5.71f,
LINE_TO, 752, 444.43f,
CLOSE,
MOVE_TO, 179.44f, 212.19f,
R_CUBIC_TO, -36, 0.16f, -65.12f, 30.61f, -65.26f, 68.24f,
R_V_LINE_TO, 461.22f,
R_CUBIC_TO, 0.16f, 37.6f, 29.28f, 68.06f, 65.26f, 68.21f,
R_H_LINE_TO, 441.14f,
R_CUBIC_TO, 35.98f, -0.16f, 65.1f, -30.61f, 65.25f, -68.21f,
V_LINE_TO, 281.39f,
R_CUBIC_TO, -0.14f, -37.6f, -29.28f, -68.06f, -65.25f, -68.22f,
H_LINE_TO, 179.44f,
R_V_LINE_TO, -0.96f,
CLOSE,
MOVE_TO, 505.28f, 546.69f,
R_LINE_TO, -143.62f, 95.04f,
ARC_TO, 32, 32, 0, 0, 1, 312, 615.04f,
V_LINE_TO, 424.96f,
R_ARC_TO, 32, 32, 0, 0, 1, 49.66f, -26.69f,
R_LINE_TO, 143.62f, 95.04f,
R_ARC_TO, 32, 32, 0, 0, 1, 0, 53.38f,
CLOSE)
VECTOR_ICON_TEMPLATE_CC(kRecordRepList, kRecordIcon, {kRecordPath, base::size(kRecordPath)})

}  // namespace yes

gfx::CreateVectorIcon会把VectorIcon转换成ImageSkia。还有其他各种方式使用vector icons。

components/vector_icons目录为例。

参考