形状

形状是您想为网站增添个性时的实用工具。在本章中，您将学习如何添加标准和自定义背景/图像形状。

它们是 SVG 文件，您可以将它们作为装饰背景添加到不同的部分或直接添加到图像上。每个形状都有一个或多个可自定义的颜色，其中一些是动画。

警告

Odoo 的默认形状使用 Odoo 默认颜色调色板 映射作为参考。这样一来，每次颜色调色板更改时，颜色都会自动适配到新的 调色板：

default_palette = {
   '1': '#3AADAA',
   '2': '#7C6576',
   '3': '#F6F6F6',
   '4': '#FFFFFF',
   '5': '#383E45',
}

背景形状

标准

提供了大量默认背景形状可供选择。

用法

<section data-oe-shape-data="{'shape':'html_builder/Zigs/06'}">
   <div class="o_we_shape o_html_builder_Zigs_06" />
   <div class="container">
      <!-- Content -->
   </div>
</section>

data-oe-shape-data 是一个JSON对象，包含有关形状的信息，例如SVG文件的位置、重复和翻转选项等。

例如，您可以通过使用X轴或Y轴像这样 翻转形状 ：

<section data-oe-shape-data="{'shape':'html_builder/Zigs/06','flip':['x','y']}">
   <div class="o_we_shape o_html_builder_Zigs_06" />
   <div class="container">
       <!-- Content -->
   </div>
</section>

颜色映射

您还可以通过切换当前映射中的颜色或创建一个替代映射（而不修改原始映射）来更改形状的默认颜色映射。

切换颜色映射

首先，我们可以像这样使用一个形状：

初始形状 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="100%" height="100%">
   <defs>
      <svg id="zigs06_top" viewBox="0 0 30 30" preserveAspectRatio="xMinYMin meet" fill="#383E45" width="100%">
         <path d="M30,7.9C22.5,7.9,22.5,20,15,20S7.5,7.9,0,7.9V0h30V7.9z" />
      </svg>
      <svg id="zigs06_bottom" viewBox="0 0 30 30" preserveAspectRatio="xMinYMax meet" fill="#FFFFFF" width="100%">
         <path d="M0,22.1C7.5,22.1,7.5,10,15,10s7.5,12.1,15,12.1V30H0V22.1z" />
      </svg>
   </defs>
   <svg>
      <use xlink:href="#zigs06_top" />
      <use xlink:href="#zigs06_bottom" />
   </svg>
</svg>

在这里，我们使用 #383E45 和 #FFFFFF ，它们分别对应Odoo默认调色板中的第5种和第4种颜色。

该形状在SCSS中声明如下：

/website_airproof/static/src/scss/primary_variables.scss
'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true),
形状颜色

顶部使用偏黑色（ c5 ），底部使用偏浅色（ c4 ），中间部分形状则完全透明。

我们将使用一些 键: 值 对重写 colors 映射：

使用调色板引用和自定义颜色

/website_airproof/static/src/scss/primary_variables.scss
 $o-bg-shapes: change-shape-colors-mapping('html_builder', 'Zigs/06', (4: 3, 5: rgb(187, 27, 152)))

或者仅使用引用

/website_airproof/static/src/scss/primary_variables.scss
 $o-bg-shapes: change-shape-colors-mapping('html_builder', 'Zigs/06', (4: 3, 5: 1));

c4 （白色）将被替换为 c3 （偏白色）， c5 （黑色）将被替换为 c1 （白色）。

结果

最终形状 最终形状选项
添加额外的颜色映射

添加额外的颜色映射允许您在保留原始形状的同时为形状模板添加颜色变体。

/website_airproof/static/src/scss/boostrap_overridden.scss
$o-bg-shapes: add-extra-shape-colors-mapping('html_builder', 'Zigs/06', 'second', (4: 3, 5: 1));

<section data-oe-shape-data="{'shape':'html_builder/Zigs/06'}">
   <div class="o_we_shape o_html_builder_Zigs_06 o_second_extra_shape_mapping" />
   <div class="container">
      <!-- Content -->
   </div>
</section>

自定义

有时，您的设计可能需要创建一个或多个自定义形状。

首先，您需要为您的形状创建一个SVG文件。

/website_airproof/static/shapes/waves/01.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1309 581">
   <path style="fill: #3AADAA;" d="..." />
</svg>

重要

确保为您的形状使用默认的Odoo调色板中的颜色（如上文 所述 ）。

附件

声明您的形状文件。

/website_airproof/data/shapes.xml
<record id="shape_waves_01" model="ir.attachment">
   <field name="name">waves_01.svg</field>
   <field name="datas" type="base64" file="website_airproof/static/shapes/waves/01.svg" />
   <field name="url">/html_editor/shape/website_airproof/waves/01.svg</field>
   <field name="public" eval="True" />
</record>

字段

描述

名称

形状的名称

raw

形状的路径

URL

形状在 HTML 编辑器中的位置。该文件会由网站构建器自动复制到 /html_editor/shape/website_airproof。

公开

使形状可供后续编辑。

SCSS

定义形状的样式。

/website_airproof/static/src/scss/primary_variables.scss
$o-bg-shapes: map-merge($o-bg-shapes,
   (
      'website_airproof': (
         'waves/01': ('position': left bottom, 'size': 100% auto, 'colors': (1)),
      ),
   )
);

键

描述

文件位置

waves/01 对应您在 shapes 文件夹中文件的位置。

位置

定义形状的位置。

大小

定义形状的大小。

颜色

定义您希望形状具有的颜色 c*（这将覆盖您在SVG中指定的颜色）。

水平重复

定义形状是否水平重复。此键是可选的，仅在设置为 true 时需要定义。

垂直重复

定义形状是否垂直重复。此键是可选的，仅在设置为 true 时需要定义。

添加选项

最后，通过扩展 background_shape_groups_providers 资源，将您的形状添加到网站构建器上可用的形状列表中。

/website_airproof/static/src/builder/background_shapes_option_plugin.js
import { Plugin } from "@html_editor/plugin";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";

export class AirproofBackgroundShapesOptionPlugin extends Plugin {
   static id = "airproofBackgroundShapesOption";
   resources = {
      background_shape_groups_providers: () => ({
         airproof: {
            label: _t("Airproof"),
            subgroups: {
               airproof: {
                  label: _t("Airproof"),
                  shapes: {
                     "website_airproof/waves/01": {
                        selectLabel: _t("Waves 01"),
                     },
                  },
               },
            },
         },
      }),
   };
}

registry.category("website-plugins").add(
   AirproofBackgroundShapesOptionPlugin.id,
   AirproofBackgroundShapesOptionPlugin
);

注解

将 JavaScript 文件添加到 website.website_builder_assets 资产包中，以便编辑器加载它。

在页面中使用它

在您的XML页面中，您可以像使用其他形状一样使用您的形状。

<section class="..." data-oe-shape-data="{'shape': 'website_airproof/waves/01', 'colors': {'c1': '#BBE1FA'}, 'flip': ['x']}">
   <div
      class="o_we_shape o_website_airproof_waves_01 o_we_flip_x"
      style="background-image: url('/html_editor/shape/website_airproof/waves/01.svg?c1=%23BBE1FA'); background-position: 100% 100%;" />
   <div class="container">
      <!-- Content -->
   </div>
</section>

您还可以使用 data-oe-shape-data 属性重新定义颜色，但这只是可选的。

图像形状

图像形状是 SVG 文件，可作为裁剪遮罩添加到你的图像上。部分形状的颜色可自定义，部分形状支持动画。

标准

系统提供大量默认的图像形状可供选择。

用法

形状只能应用于之前已在 ir.attachment 记录中声明的图像，因为网站生成器（Website Builder）需要重新处理该图像。概括来说，系统会将原始图像注入到一个同时包含图像与形状的 SVG 文件中。

完整处理后，带形状的图像呈现为下方示例中的样子：

<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/solid/solid_blob_2"
   data-shape-colors="#0B8EE6;;;;"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/jpeg"
   data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
   data-file-name="s_text_image.svg"
   data-original-id="590"
   data-attachment-id="590" />

img 元素包含多个 data 属性，供网站生成器（Website Builder）在图像再次编辑时重新处理它：

属性

描述

data-shape

形状所在的位置

data-shape-colors

应用于形状的颜色（最多 5 个；每个值即便为空，也需用分号分隔）

data-mimetype

带形状图像的 MIME 类型

data-mimetype-before-conversion

原始图像的 MIME 类型

data-original-src

原始图像文件的路径

data-file-name

形状修改后所创建文件的名称（由于图像形状被应用到包含形状与原始图像的 SVG 文件中，请务必使用 .svg 扩展名）

data-original-id

原始 ir.attachment 的标识符（对应上传的图像）

data-attachment-id

与带形状图像关联的 ir.attachment 的标识符。

调用形状

插入带形状的图像需要调用已处理的附件（携带最少必需属性），而不能仅调用原始图像。

下面是调用一个包含彩色元素的形状所需的最小配置示例：

<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/solid/solid_blob_2"
   data-shape-colors="#0B8EE6;;;;"
   data-format-mimetype="image/jpeg"
   data-file-name="s_text_image.svg"
   loading="lazy" />

通过网站生成器（Website Builder）手动应用形状时：

  1. 原始记录被处理，src 属性被更新为一个 base64 图像。

  2. 页面保存后，base64 图像会被移入最终的 SVG（由 data-file-name 指定）。

  3. 最后，src 属性被更新为如下路径结构：/web/image/<attachment_id>-<attachment_checksum>/<finale_image>.svg，同时由网站生成器（Website Builder）生成若干 data 属性（data-original-id、data-attachment-id、data-mimetype、data-mimetype-before-conversion 等）。

但这里存在 2 个问题：

  1. 将最终图像转换为 base64 格式并不那么简单（因为它并不真正 便于人类阅读）。

  2. 最终 ir.attachment 的 checksum 计算使用了一种算法。

无论以何种方式实现，都需要借助外部工具；不过 html_editor 模块提供了一个控制器，其中包含一个可组合图像形状与图像文件的实用路由：

@http.route([
   '/web_editor/image_shape/<string:img_key>/<module>/<path:filename>',
   '/html_editor/image_shape/<string:img_key>/<module>/<path:filename>'],
   type='http', auth="public", website=True)

另请参阅

HTML 编辑器 - 图像形状路由

重点关注 /html_editor 路径，它是 Odoo 18 及更早版本中 Web Editor 的“新名称”，请相应地替换其中的占位符：

<img
   src="/html_editor/image_shape/website_airproof.img_drone_robin/html_builder/solid/solid_blob_2.svg"
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/solid/solid_blob_2"
   data-shape-colors="#0B8EE6;;;;"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/webp"
   data-original-src="website_airproof/static/src/img/content/drone-robin.webp"
   data-file-name="drone-robin.svg"
   data-original-id="560"
   data-attachment-id="560" />

小技巧

如果在编辑之前形状显示的是 Odoo 默认颜色（相较于 data-shape-colors 中定义的值），请传入一个颜色调色板参数，其值应与 data-shape-colors 中定义的转义颜色相同：

<img
   src="/html_editor/image_shape/website_airproof.img_drone_robin/html_builder/solid/solid_blob_2.svg?c1=%230B8EE6" />
c* 对应 data-shape-colors 中的位置：

  • c1 对应 #0B8EE6;;;;

  • c2 对应 ;#0B8EE6;;;

  • Etc

重要

请务必注意：只要未通过网站生成器（Website Builder）手动保存该图像，它就不会以记录形式存储在数据库中， 而是为每一位浏览该页面的访问者实时生成 。因此它可能影响网站的加载性能。

颜色

图像形状最多可包含 5 种颜色。由于 SVG 文件中包含与 Odoo 默认调色板相关的颜色，系统能够将文件中的颜色进行映射，并与图像 data-shape-colors 属性中调用的颜色相匹配。

<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/solid/solid_blob_2"
   data-shape-colors="#0B8EE6;;;;"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/jpeg"
   data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
   data-file-name="s_text_image.svg"
   data-original-id="590"
   data-attachment-id="590" />

在上方的示例中，颜色 #0B8EE6 作为调色板的第一种颜色应用。考虑到默认调色板的第一个颜色是 #3AADAA，网站生成器（Website Builder）会用 #0B8EE6 替换掉 #3AADAA。

颜色编辑

变换与拉伸

部分形状可通过变换（翻转、旋转）进行调整：

变换与拉伸选项 
<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/geometric/geo_slanted"
   data-shape-flip="xy"
   data-shape-rotate="90"
   data-aspect-ratio="1/1"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/jpeg"
   data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
   data-file-name="s_text_image.svg"
   data-original-id="590"
   data-attachment-id="590" />

属性

描述

data-shape-flip

沿 x 轴（x）、y 轴（y）或双轴（xy）翻转形状。

data-shape-rotate

按 90 度为单位旋转形状（90、180、270）。

data-aspect-ratio

按图像比例拉伸形状：1/1 （默认，图像填满形状）或 0/0 （启用 拉伸 选项，形状适配图像的宽高比）

动画

部分形状支持动画，且其速度可调：

动画图像形状的速度选项 
<img
   src="..."
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="html_builder/geometric/geo_square_1"
   data-shape-animation-speed="2"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/jpeg"
   data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
   data-file-name="s_text_image.svg"
   data-original-id="590"
   data-attachment-id="590" />

属性

描述

data-shape-animation-speed

动画速度（取值范围为 -2 到 2，步长为 0.1）

自定义

创建自定义图像形状非常简单，共分两步：

  1. 创建一个具有特定结构的 SVG 文件

  2. 将自定义形状添加到列表

创建 SVG

首先，为你的图像形状创建一个 SVG 文件。

/website_airproof/static/image_shapes/duo/01.svg
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="800"
   height="800">
   <defs>
      <!-- Mask -->
      <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
         <use xlink:href="#filterPath" fill="none" />
      </clipPath>
      <!-- Vector used in the mask definition (Clip-path) -->
      <path id="filterPath" d="M0.325,0.75H0.125c-0.069,0-0.125-0.056-0.125-0.125V0.125C0,0.056,
      0.056,0,0.125,0h0.2c0.069,0,0.125,0.056,0.125,0.125v0.5c0,0.069-0.056,0.125-0.125,0.125ZM1,
      0.875v-0.5c0-0.069-0.056-0.125-0.125-0.125h-0.2c-0.069,0-0.125,0.056-0.125,0.125v0.5c0,
      0.069,0.056,0.125,0.125,0.125h0.2c0.069,0,0.125-0.056,0.125-0.125Z" />
   </defs>

   <!-- Other decorative element around (not used as a mask) -->
   <svg viewBox="0 0 1 1" preserveAspectRatio="none">
      <rect x="0.494"
         y="0.325"
         width="0.0125"
         height="0.35"
         rx="0.00625"
         ry="0.00625"
         fill="#7C6576" />
   </svg>

   <!-- Preview of the Path declared in the <defs> -->
   <svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
      <use xlink:href="#filterPath" fill="darkgrey" />
   </svg>

   <!-- Future image that on wich the mask is applied -->
   <image xlink:href="" clip-path="url(#clip-path)">
      <!-- Compatibility hack (Safari, Firefox) for non-animated shapes -->
      <animateMotion dur="1ms" repeatCount="indefinite" />
   </image>
</svg>

SVG 文件可以用任何矢量编辑软件创建，但需要做一些调整才能与网站生成器（Website Builder）正常配合。下面对上方示例进行拆解说明。

主 SVG

图像形状被包裹在一个主 SVG 对象中，其中 width 与 height 属性以像素为单位显式指定：

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="800"
   height="800">
   ...
</svg>

遮罩

遮罩在 <defs> 标签中定义，以便复用（即使实际并未复用）。它由 2 个元素构成：一个 clip-path 和一个矢量图形（在我们的形状中即 path）。在此阶段，写入 defs 中的内容不会显示出来。

<defs>
   <!-- Mask -->
   <clipPath id="clip-path" clipPathUnits="objectBoundingBox">
      <use xlink:href="#filterPath" fill="none" />
   </clipPath>
   <!-- Vector used in the mask definition (Clip-path) -->
   <path id="filterPath" d="M0.325,0.75H0.125c-0.069,0-0.125-0.056-0.125-0.125V0.125C0,0.056,
   0.056,0,0.125,0h0.2c0.069,0,0.125,0.056,0.125,0.125v0.5c0,0.069-0.056,0.125-0.125,0.125ZM1,
   0.875v-0.5c0-0.069-0.056-0.125-0.125-0.125h-0.2c-0.069,0-0.125,0.056-0.125,0.125v0.5c0,
   0.069,0.056,0.125,0.125,0.125h0.2c0.069,0,0.125-0.056,0.125-0.125Z" />
</defs>

附加装饰

如果形状包含其他装饰元素，则它们被放在主 SVG 内、defs 之外。

<svg viewBox="0 0 1 1" preserveAspectRatio="none">
   <rect
      x="0.494"
      y="0.325"
      width="0.0125"
      height="0.35"
      rx="0.00625"
      ry="0.00625"
      fill="#7C6576" />
</svg>

小技巧

主 SVG 的 width 与 height 属性以像素为单位表示（本例中为 800），但 viewBox 始终被规范化到 0 与 1 之间。由于 SVG 是可缩放格式，因此无论渲染尺寸如何，图像都能保持清晰。

此装饰元素的 fill 颜色可以通过网站生成器（Website Builder）编辑：

颜色编辑

重要

不要忘记使用来自 Odoo 默认调色板的颜色，这样才能被网站生成器（Website Builder）编辑（如 上文所述）。

预览

接着，引用之前设置的 id （filterPath），将遮罩渲染为一个“预览”：

<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
   <use xlink:href="#filterPath" fill="darkgrey" />
</svg>

图像

最后，添加一个带 clip-path 引用的 image 标签，它将承载你未来的图像（以 base64 格式）。

<image xlink:href="" clip-path="url(#clip-path)">
   <!-- Compatibility hack (Safari, Firefox) for non-animated shapes -->
   <animateMotion dur="1ms" repeatCount="indefinite" />
</image>

小技巧

你可以在浏览器中 运行此工具，将你的源 SVG 文件转换为兼容图像形状的格式。

将其添加到列表

最后，将自定义形状添加到列表：

/website_airproof/static/src/website_builder/image_shapes_option_plugin.js
import { Plugin } from "@html_editor/plugin";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
export class AirproofImageShapesOptionPlugin extends Plugin {
   static id = "airproofImageShapesOption";
   resources = {
      image_shape_groups_providers: () => ({
         airproof: {
            label: _t("Airproof"),
            subgroups: {
               airproof_duo: {
                  label: _t("Duo"),
                  shapes: {
                     "website_airproof/duo/01": {
                        selectLabel: _t("Duo 01"),
                        transform: true,
                        togglableRatio: true,
                     },
                  },
               },
            },
         },
      }),
   };
}

registry.category("website-plugins").add(
   AirproofImageShapesOptionPlugin.id,
   AirproofImageShapesOptionPlugin
);

房产

描述

selectLabel

列表中显示的形状名称

transform

显示/隐藏变换选项（垂直与水平镜像、左旋与右旋）。

togglableRatio

显示/隐藏拉伸选项。

animated

指示该形状是否包含动画

imgSize

设置 设备 所使用的图像比例（示例：0.46:1）
变换与拉伸选项

变换与拉伸选项

在页面中使用它

现在，自定义图像形状已可应用于图像，例如你的静态页面：

<img
   src="/html_editor/image_shape/website_airproof.img_drone_robin/website_airproof/duo/01.svg?c2=%230B8EE6"
   class="img img-fluid mx-auto"
   alt="..."
   data-shape="website_airproof/duo/01"
   data-shape-colors=";#0B8EE6;;;"
   data-format-mimetype="image/webp"
   data-file-name="drone-robin.svg"
   loading="lazy" />