From 7c340e0cb871d90a50b846c42904f8a2b1a909e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Fri, 7 Nov 2025 16:25:41 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=B7=A5=E5=85=B7=E5=BC=80?= =?UTF-8?q?=E5=8F=91=E4=B8=80=E5=8D=8A,=20=E4=BF=AE=E6=94=B9=E6=96=B0?= =?UTF-8?q?=E5=BB=BA=E5=9B=BE=E5=B1=82=E9=A1=BA=E5=BA=8F=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/iconfont2/demo.css | 539 ++++++++++ src/assets/iconfont2/demo_index.html | 947 ++++++++++++++++++ src/assets/iconfont2/iconfont.css | 20 +- src/assets/iconfont2/iconfont.js | 1 + src/assets/iconfont2/iconfont.json | 21 + src/assets/iconfont2/iconfont.ttf | Bin 8260 -> 8864 bytes src/assets/iconfont2/iconfont.woff | Bin 5188 -> 5560 bytes src/assets/iconfont2/iconfont.woff2 | Bin 4388 -> 4616 bytes .../components/SelectMenuPanel.vue | 609 +++++++++++ .../CanvasEditor/fabric-canvas-events.text | 23 + src/component/Canvas/CanvasEditor/index.vue | 28 +- .../CanvasEditor/managers/LayerManager.js | 11 + .../managers/events/CanvasEventManager.js | 7 +- 13 files changed, 2198 insertions(+), 8 deletions(-) create mode 100644 src/assets/iconfont2/demo.css create mode 100644 src/assets/iconfont2/demo_index.html create mode 100644 src/assets/iconfont2/iconfont.js create mode 100644 src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue create mode 100644 src/component/Canvas/CanvasEditor/fabric-canvas-events.text diff --git a/src/assets/iconfont2/demo.css b/src/assets/iconfont2/demo.css new file mode 100644 index 00000000..a67054a0 --- /dev/null +++ b/src/assets/iconfont2/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时,垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/assets/iconfont2/demo_index.html b/src/assets/iconfont2/demo_index.html new file mode 100644 index 00000000..4b8dda54 --- /dev/null +++ b/src/assets/iconfont2/demo_index.html @@ -0,0 +1,947 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+ +
+
+
    + +
  • + +
    角度
    +
    &#xe60a;
    +
  • + +
  • + +
    水平翻转
    +
    &#xe69e;
    +
  • + +
  • + +
    垂直翻转
    +
    &#xec60;
    +
  • + +
  • + +
    clothes
    +
    &#xe8d1;
    +
  • + +
  • + +
    材质
    +
    &#xe647;
    +
  • + +
  • + +
    IC-液化
    +
    &#xe61b;
    +
  • + +
  • + +
    上一层
    +
    &#xe751;
    +
  • + +
  • + +
    上一层
    +
    &#xe604;
    +
  • + +
  • + +
    下一层
    +
    &#xe68a;
    +
  • + +
  • + +
    上一层
    +
    &#xe68b;
    +
  • + +
  • + +
    审批
    +
    &#xe6a1;
    +
  • + +
  • + +
    用户
    +
    &#xe617;
    +
  • + +
  • + +
    使用次数
    +
    &#xe601;
    +
  • + +
  • + +
    下拉
    +
    &#xe634;
    +
  • + +
  • + +
    编辑
    +
    &#xe600;
    +
  • + +
  • + +
    圆形
    +
    &#xe64f;
    +
  • + +
  • + +
    三角形
    +
    &#xe615;
    +
  • + +
  • + +
    图层
    +
    &#xe632;
    +
  • + +
  • + +
    平移
    +
    &#xe616;
    +
  • + +
  • + +
    橡皮
    +
    &#xe67b;
    +
  • + +
  • + +
    tx-fill-椭圆形
    +
    &#xe64c;
    +
  • + +
  • + +
    直线
    +
    &#xe602;
    +
  • + +
  • + +
    线
    +
    &#xec5f;
    +
  • + +
  • + +
    正方形
    +
    &#xea6f;
    +
  • + +
  • + +
    图层
    +
    &#xe62d;
    +
  • + +
  • + +
    点位
    +
    &#xe685;
    +
  • + +
  • + +
    并集
    +
    &#xe620;
    +
  • + +
  • + +
    并集
    +
    &#xe668;
    +
  • + +
  • + +
    标签
    +
    &#xe603;
    +
  • + +
  • + +
    语言
    +
    &#xe85f;
    +
  • + +
  • + +
    撤销 返回 撤回 上一步
    +
    &#xe626;
    +
  • + +
  • + +
    撤销 返回 撤回 上一步
    +
    &#xe609;
    +
  • + +
  • + +
    外套_长款外套1@1x
    +
    &#xe66c;
    +
  • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式,特点是:

+
    +
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • +
  • 默认情况下不支持多色,直接添加多色图标会自动去色。
  • +
+
+

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

+
+

Unicode 使用步骤如下:

+

第一步:拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1762495405814') format('woff2'),
+       url('iconfont.woff?t=1762495405814') format('woff'),
+       url('iconfont.ttf?t=1762495405814') format('truetype');
+}
+
+

第二步:定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步:挑选相应图标并获取字体编码,应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 角度 +
    +
    .icon-angle +
    +
  • + +
  • + +
    + 水平翻转 +
    +
    .icon-flip-horizontal +
    +
  • + +
  • + +
    + 垂直翻转 +
    +
    .icon-flip-vertical +
    +
  • + +
  • + +
    + clothes +
    +
    .icon-clothes +
    +
  • + +
  • + +
    + 材质 +
    +
    .icon-caizhi +
    +
  • + +
  • + +
    + IC-液化 +
    +
    .icon-IC-yehua +
    +
  • + +
  • + +
    + 上一层 +
    +
    .icon-shangyiceng +
    +
  • + +
  • + +
    + 上一层 +
    +
    .icon-shangyiceng1 +
    +
  • + +
  • + +
    + 下一层 +
    +
    .icon-xiayiceng +
    +
  • + +
  • + +
    + 上一层 +
    +
    .icon-shangyiceng2 +
    +
  • + +
  • + +
    + 审批 +
    +
    .icon-shenpi +
    +
  • + +
  • + +
    + 用户 +
    +
    .icon-yonghu +
    +
  • + +
  • + +
    + 使用次数 +
    +
    .icon-usetime +
    +
  • + +
  • + +
    + 下拉 +
    +
    .icon-xiala +
    +
  • + +
  • + +
    + 编辑 +
    +
    .icon-bianji +
    +
  • + +
  • + +
    + 圆形 +
    +
    .icon-circle +
    +
  • + +
  • + +
    + 三角形 +
    +
    .icon-sanjiaoxing +
    +
  • + +
  • + +
    + 图层 +
    +
    .icon-tuceng +
    +
  • + +
  • + +
    + 平移 +
    +
    .icon-move +
    +
  • + +
  • + +
    + 橡皮 +
    +
    .icon-xiangpi_huaban1 +
    +
  • + +
  • + +
    + tx-fill-椭圆形 +
    +
    .icon-tx-fill-tuoyuanxing +
    +
  • + +
  • + +
    + 直线 +
    +
    .icon-zhixian +
    +
  • + +
  • + +
    + 线 +
    +
    .icon-xian +
    +
  • + +
  • + +
    + 正方形 +
    +
    .icon-checkbox-full +
    +
  • + +
  • + +
    + 图层 +
    +
    .icon-tuceng1 +
    +
  • + +
  • + +
    + 点位 +
    +
    .icon-dianwei +
    +
  • + +
  • + +
    + 并集 +
    +
    .icon-bingji +
    +
  • + +
  • + +
    + 并集 +
    +
    .icon-bingji1 +
    +
  • + +
  • + +
    + 标签 +
    +
    .icon-biaoqian +
    +
  • + +
  • + +
    + 语言 +
    +
    .icon-yuyan +
    +
  • + +
  • + +
    + 撤销 返回 撤回 上一步 +
    +
    .icon-fanchehui +
    +
  • + +
  • + +
    + 撤销 返回 撤回 上一步 +
    +
    .icon-chehui +
    +
  • + +
  • + +
    + 外套_长款外套1@1x +
    +
    .icon-a-waitao_changkuanwaitao11x +
    +
  • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

+

与 Unicode 使用方式相比,具有如下特点:

+
    +
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • +
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的 fontclass 代码:

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步:挑选相应图标并获取类名,应用于页面:

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    角度
    +
    #icon-angle
    +
  • + +
  • + +
    水平翻转
    +
    #icon-flip-horizontal
    +
  • + +
  • + +
    垂直翻转
    +
    #icon-flip-vertical
    +
  • + +
  • + +
    clothes
    +
    #icon-clothes
    +
  • + +
  • + +
    材质
    +
    #icon-caizhi
    +
  • + +
  • + +
    IC-液化
    +
    #icon-IC-yehua
    +
  • + +
  • + +
    上一层
    +
    #icon-shangyiceng
    +
  • + +
  • + +
    上一层
    +
    #icon-shangyiceng1
    +
  • + +
  • + +
    下一层
    +
    #icon-xiayiceng
    +
  • + +
  • + +
    上一层
    +
    #icon-shangyiceng2
    +
  • + +
  • + +
    审批
    +
    #icon-shenpi
    +
  • + +
  • + +
    用户
    +
    #icon-yonghu
    +
  • + +
  • + +
    使用次数
    +
    #icon-usetime
    +
  • + +
  • + +
    下拉
    +
    #icon-xiala
    +
  • + +
  • + +
    编辑
    +
    #icon-bianji
    +
  • + +
  • + +
    圆形
    +
    #icon-circle
    +
  • + +
  • + +
    三角形
    +
    #icon-sanjiaoxing
    +
  • + +
  • + +
    图层
    +
    #icon-tuceng
    +
  • + +
  • + +
    平移
    +
    #icon-move
    +
  • + +
  • + +
    橡皮
    +
    #icon-xiangpi_huaban1
    +
  • + +
  • + +
    tx-fill-椭圆形
    +
    #icon-tx-fill-tuoyuanxing
    +
  • + +
  • + +
    直线
    +
    #icon-zhixian
    +
  • + +
  • + +
    线
    +
    #icon-xian
    +
  • + +
  • + +
    正方形
    +
    #icon-checkbox-full
    +
  • + +
  • + +
    图层
    +
    #icon-tuceng1
    +
  • + +
  • + +
    点位
    +
    #icon-dianwei
    +
  • + +
  • + +
    并集
    +
    #icon-bingji
    +
  • + +
  • + +
    并集
    +
    #icon-bingji1
    +
  • + +
  • + +
    标签
    +
    #icon-biaoqian
    +
  • + +
  • + +
    语言
    +
    #icon-yuyan
    +
  • + +
  • + +
    撤销 返回 撤回 上一步
    +
    #icon-fanchehui
    +
  • + +
  • + +
    撤销 返回 撤回 上一步
    +
    #icon-chehui
    +
  • + +
  • + +
    外套_长款外套1@1x
    +
    #icon-a-waitao_changkuanwaitao11x
    +
  • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

+
    +
  • 支持多色图标了,不再受单色限制。
  • +
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • +
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • +
  • 浏览器渲染 SVG 的性能一般,还不如 png。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的 symbol 代码:

+
<script src="./iconfont.js"></script>
+
+

第二步:加入通用 CSS 代码(引入一次就行):

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步:挑选相应图标并获取类名,应用于页面:

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/assets/iconfont2/iconfont.css b/src/assets/iconfont2/iconfont.css index 32375ef9..27459f1d 100644 --- a/src/assets/iconfont2/iconfont.css +++ b/src/assets/iconfont2/iconfont.css @@ -1,18 +1,30 @@ @font-face { font-family: "iconfont"; /* Project id 4292253 */ - src: url('iconfont.woff2?t=1759888699816') format('woff2'), - url('iconfont.woff?t=1759888699816') format('woff'), - url('iconfont.ttf?t=1759888699816') format('truetype'); + src: url('iconfont.woff2?t=1762495405814') format('woff2'), + url('iconfont.woff?t=1762495405814') format('woff'), + url('iconfont.ttf?t=1762495405814') format('truetype'); } .iconfont { font-family: "iconfont" !important; - font-size: 1.6rem; + font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +.icon-angle:before { + content: "\e60a"; +} + +.icon-flip-horizontal:before { + content: "\e69e"; +} + +.icon-flip-vertical:before { + content: "\ec60"; +} + .icon-clothes:before { content: "\e8d1"; } diff --git a/src/assets/iconfont2/iconfont.js b/src/assets/iconfont2/iconfont.js new file mode 100644 index 00000000..a5ff72ea --- /dev/null +++ b/src/assets/iconfont2/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4292253='',(c=>{var a=(l=(l=document.getElementsByTagName("script"))[l.length-1]).getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var i,t,o,h,e,n=function(a,l){l.parentNode.insertBefore(a,l)};if(a&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}i=function(){var a,l=document.createElement("div");l.innerHTML=c._iconfont_svg_string_4292253,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?n(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),i()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(o=i,h=c.document,e=!1,s(),h.onreadystatechange=function(){"complete"==h.readyState&&(h.onreadystatechange=null,m())})}function m(){e||(e=!0,o())}function s(){try{h.documentElement.doScroll("left")}catch(a){return void setTimeout(s,50)}m()}})(window); \ No newline at end of file diff --git a/src/assets/iconfont2/iconfont.json b/src/assets/iconfont2/iconfont.json index 21b485b7..25879380 100644 --- a/src/assets/iconfont2/iconfont.json +++ b/src/assets/iconfont2/iconfont.json @@ -5,6 +5,27 @@ "css_prefix_text": "icon-", "description": "", "glyphs": [ + { + "icon_id": "8875396", + "name": "角度", + "font_class": "angle", + "unicode": "e60a", + "unicode_decimal": 58890 + }, + { + "icon_id": "15551512", + "name": "水平翻转", + "font_class": "flip-horizontal", + "unicode": "e69e", + "unicode_decimal": 59038 + }, + { + "icon_id": "46016160", + "name": "垂直翻转", + "font_class": "flip-vertical", + "unicode": "ec60", + "unicode_decimal": 60512 + }, { "icon_id": "20183053", "name": "clothes", diff --git a/src/assets/iconfont2/iconfont.ttf b/src/assets/iconfont2/iconfont.ttf index d708a6c9adce756df9d035492dc5ef223f7587a2..60d95743e7f9a03ddb444e5410b4c2a7cc077ef7 100644 GIT binary patch delta 1543 zcmaKqTWB0r9LB#hGdsI8n>5+YWs|H;vzxNPOIFx48_=|l0aGvWQV|3#CQFhgk=-QJ zpw(73l?u`(P~2AyDJ|LuAF2USDHuiKgL$y{Ak9O`OHY@w6rq|v*zEe9JwC*up5Zs= zGV}kR@Bf|igSY&|+0MKNhy?&6qq)rNCGltvV9Wt#aU%Qnk&l;3*8%$i5ZRm@&x|FX zz5Fu&-6ZKrE(AWcra8V$_D<&Jj-8HI?l518^AEB!qnWX9hLemx%=ut0b8J@h;U|7? z;k;uylN+x;pYOi}w4dUp6SFgK%q349+Tb@P5T8R(#(ZTShpqL>-Act;S1bQ$@#+d! z_rLaCbhxhn4+O3157&G8yVXGTjLlo?=1EQiFsh%Ko_!qOLIewOkrVZWv*Ix^QutZK zoOQsuUs1Rv7Q2V^reY9gb@UK>mvV<-i8dxlp#v7e(vq%>6gG@#-5I$g&)qmw94=nD zIa6Xzqf0Cmwv7FGwQUNIpda4ya2jfF%Kn-j}u?MXPV;6jALOt$7 z42@`mLv;p%@S~l&S`eXL2wRoCa?$jO{6}iY76T+Z1-F2tBMNQ?NtYDd7Lwr#3V@`! z3QB==G!z9%Llnv&*`%RRNEJ^g88V{DQ$1uX+Q6B^bA$pcidO30Lk^+N8` zuyV+Q8hQXZq@f#-&ui!lwnMqwbJA zr=iifaY#eUQ5@FLd=#%}cnr8Xqd^NVL5V*pcs3}FXw)gO#j$`bF(z&qYo=>HXTE2C zX%?+7d;`AMeXBlc@3lX)zp_jIu)o7Ul#9F$l2)mkz4lD`q?zQ(OV^Hj zo~o;|Yz52_rU+A30uLa`%bVu)J-`c!hD6+NH-+rxzErPB@9Xk~A|he?h20nt&8c)( zD4p>2G<-`zH+eA^8NjW##*q_^sAuX?8E-Cgwzoupb+e$m`A-}f)(?@*1=>V}{C7l{mR)0R|iXuY~UNK2~rTy>)L!Zn~~v4yl}1k zz=I+t;-VA2%=AQdyzWSLYPNfF=IGQrGt+aKY;AS^=J?UMsnJY!W%r&g!K?BYw4+CC delta 984 zcmaKqOGuPa7>3{T&p%hMm6s`RV}*jGg-Fd}7~O=M0TVP@1mj@lATy4jk!3QvFdFWfPjbNb$R1<7PEIG& zQ`56{;XBXUWqv1>8BSaZ4~Drv#Jne+n4VCb*x-DSd1yS59;tkojXVbG2YBh|L}qfz zn$K=BBrVb|ozf+}5|chjN=jyAL6&57yFVY#Z|!7u=$?ipKwJhE1EJ{}mId(}SRka@z)~SK z1{MveHL(0Fq>c%p5=h8EO^_A?)j`?~)CuV{P%)&-K<$uTgMMO(8R!S3&p>A&{IfOm z2$Irh{aW#ifyO}=473n(&pzHS%!-O-Fvqpnsg5jDZhR{! bE>Iqb1%9rr_-2Eu$tiD+Dy-dXZdHE(2n^H^ diff --git a/src/assets/iconfont2/iconfont.woff b/src/assets/iconfont2/iconfont.woff index 2f9fcd35f6d46eda654c32b5bbde75bc27631872..d63da1b4dd580505230f7823ada4d99818388eb9 100644 GIT binary patch delta 5133 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 t{=N&B+bC(DZ^*C3Lw34GlVhHg(#HP# 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 literal 4388 zcmV+<5!>!}Pew8T0RR9101+er3jhEB03bvF01(sw0RR9100000000000000000000 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 diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue new file mode 100644 index 00000000..a340bde0 --- /dev/null +++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue @@ -0,0 +1,609 @@ + + + + + diff --git a/src/component/Canvas/CanvasEditor/fabric-canvas-events.text b/src/component/Canvas/CanvasEditor/fabric-canvas-events.text new file mode 100644 index 00000000..9d2692c9 --- /dev/null +++ b/src/component/Canvas/CanvasEditor/fabric-canvas-events.text @@ -0,0 +1,23 @@ +1. 初始化事件 +object:added:当新对象被添加到画布上时触发。 +object:removed:当对象从画布上移除时触发。 +selection:created:当选择对象时触发。 +selection:updated:当选择的对象被更新时触发。 +selection:cleared:当所有对象都被取消选择时触发。 + +2. 鼠标事件 +mouse:down:鼠标按下时触发。 +mouse:move:鼠标移动时触发。 +mouse:up:鼠标释放时触发。 +mouse:over:鼠标移到画布上时触发。 +mouse:out:鼠标移出画布时触发。 +mouse:wheel:鼠标滚轮滚动时触发。 + +3. 触摸事件(在触摸屏设备上) +touch:start:触摸开始时触发。 +touch:move:触摸移动时触发。 +touch:end:触摸结束时触发。 + +4. 键盘事件 +key:down:键盘按键按下时触发。 +key:up:键盘按键释放时触发。 \ No newline at end of file diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 084b8908..1f44abc7 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -34,6 +34,7 @@ import LayersPanel from "./components/LayersPanel/LayersPanel.vue"; import BrushControlPanel from "./components/BrushControlPanel.vue"; import TextEditorPanel from "./components/TextEditorPanel.vue"; // 引入文本编辑面板 import LiquifyPanel from "./components/LiquifyPanel.vue"; // 引入液化编辑面板 +import SelectMenuPanel from "./components/SelectMenuPanel.vue"; // 引入选择工具菜单组件 import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面板 import { LayerType, OperationType } from "./utils/layerHelper.js"; import { ToolManager } from "./managers/ToolManager.js"; @@ -619,12 +620,22 @@ function updateCanvasSize() { function updateCanvasColor() { canvasManager.setCanvasColor(canvasColor.value); } - +function createLayerName(){ + const layer = t("Canvas.layer") + // 检查图层名称是否已存在 + let layerIndex = 1; + let layerName = `${layer + " " + layerIndex}`; + while (layerManager.getLayerByName(layerName)) { + layerIndex++; + layerName = `${layer} ${layerIndex}`; + } + return layerName; +} async function addLayer() { - await layerManager.createLayer(t("Canvas.EmptyLayer")); + await layerManager.createLayer(createLayerName()); } async function addTopLayer() { - await layerManager.createLayer(t("Canvas.EmptyLayer"), LayerType.EMPTY, { + await layerManager.createLayer(createLayerName(), LayerType.EMPTY, { insertTop: true, }); } @@ -1173,6 +1184,17 @@ defineExpose({ :activeTool="activeTool" /> + + +

{{ t("Canvas.Scale") }}: {{ currentZoom }}%