前端使用 Konva 实现可视化设计器（23）- 绘制曲线、属性面板

最新推荐文章于 2025-10-11 10:29:31 发布

原创

最新推荐文章于 2025-10-11 10:29:31 发布 · 1.7k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #canva可画 #正则表达式 #ui

本章分享一下如何使用 Konva 绘制基础图形：曲线，以及属性面板的基本实现思路，希望大家继续关注和支持哈（多求 5 个 Stars 谢谢）！

请大家动动小手，给我一个免费的 Star 吧~

大家如果发现了 Bug，欢迎来提 Issue 哟~

github源码

gitee源码

示例地址

绘制曲线

先上效果！

在这里插入图片描述

这里其实取巧了哈，基本就是在绘制折线的基础上，给 Konva.Line 添加一个关键的属性 tension 即可，参照官方示例：

在这里插入图片描述

未来，在属性面板中，可以调节 tension 的值，基本可以实现绘制一些简单的曲线。

属性面板

早些时候，已经有小伙伴问，外部如何动态调整 Konva 内部各对象的一些特性，这里以页面的背景色、全局线条和填充颜色，及其素材各自的线条和填充颜色为例，分享一个基本可行实现思路是如何的。

这里以 svg 素材为例，可以调整 svg 素材的线条、填充颜色。

基本交互

在这里插入图片描述

UI

这里简单粗暴一些，使用 naive-ui 的组件组装一下就可以了：

<!-- src/App.vue -->

      <n-tabs type="line" size="small" animated v-model:value="tabCurrent">
        <n-tab-pane name="page" tab="页面">
          <n-form ref="formRef" :model="pageSettingsModel" :rules="{}" label-placement="top" size="small"
            v-if="pageSettingsModel">
            <n-form-item label="背景色" path="background">
              <n-color-picker v-model:value="pageSettingsModelBackground" @update:show="(v: boolean) => {
                pageSettingsModel && !v && (pageSettingsModelBackground = pageSettingsModel.background)
              }" :actions="['clear', 'confirm']" show-preview
                @confirm="(v: string) => { pageSettingsModel && (pageSettingsModel.background = v) }"
                @clear="pageSettingsModel && (pageSettingsModel.background = Render.PageSettingsDefault.background)"></n-color-picker>
            </n-form-item>
            <n-form-item label="线条颜色" path="stroke">
              <n-color-picker v-model:value="pageSettingsModelStroke" @update:show="(v: boolean) => {
                pageSettingsModel && !v && (pageSettingsModelStroke = pageSettingsModel.stroke)
              }" :actions="['clear', 'confirm']" show-preview
                @confirm="(v: string) => { pageSettingsModel && (pageSettingsModel.stroke = v) }"
                @clear="pageSettingsModel && (pageSettingsModel.stroke = Render.AssetSettingsDefault.stroke)"></n-color-picker>
            </n-form-item>
            <n-form-item label="填充颜色" path="fill">
              <n-color-picker v-model:value="pageSettingsModelFill" @update:show="(v: boolean) => {
                pageSettingsModel && !v && (pageSettingsModelFill = pageSettingsModel.fill)
              }" :actions="['clear', 'confirm']" show-preview
                @confirm="(v: string) => { pageSettingsModel && (pageSettingsModel.fill = v) }"
                @clear="pageSettingsModel && (pageSettingsModel.fill = Render.AssetSettingsDefault.fill)"></n-color-picker>
            </n-form-item>
          </n-form>
        </n-tab-pane>
        <n-tab-pane name="asset" tab="素材" :disabled="assetCurrent === void 0">
          <n-form ref="formRef" :model="assetSettingsModel" :rules="{}" label-placement="top" size="small"
            v-if="assetSettingsModel">
            <n-form-item label="线条颜色" path="stroke" v-if="assetCurrent?.attrs.imageType === Types.ImageType.svg">
              <n-color-picker v-model:value="assetSettingsModelStorke" @update:show="(v: boolean) => {
                assetSettingsModel && !v && (assetSettingsModelStorke = assetSettingsModel.stroke)
              }" :actions="['clear', 'confirm']" show-preview
                @confirm="(v: string) => { assetSettingsModel && (assetSettingsModel.stroke = v) }"
                @clear=

最低0.47元/天解锁文章