Ver código fonte

选择器功能添加

haojianlong 4 anos atrás
pai
commit
5dc61f5c30

+ 2 - 0
docs/.vuepress/components/GitCode.vue

@@ -1,9 +1,11 @@
 <template>
     <details class="custom-block details custom-code">
         <summary>查看源代码:{{ fileUrl }}</summary>
+        <div style="max-height: 800px;overflow: auto">
         <pre class="line-numbers">
     <code class="language-typescript" v-html="code"></code>
         </pre>
+        </div>
     </details>
 </template>
 

+ 70 - 0
docs/.vuepress/components/engine/selectContainer.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <canvas :id="id" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
+    import {SGraphView, SGraphScene, SGraphRectItem} from "@persagy-web/graph/lib";
+    import {SRect} from "@persagy-web/draw/lib";
+
+    class ResizeRect extends SGraphRectItem{
+        resize(oldSize: SRect, newSize: SRect):void{
+            this.width = newSize.width;
+            this.height = newSize.height;
+        }
+    }
+
+    @Component
+    export default class SelectContainerCanvas extends Vue {
+        id: string = uuid();
+        view: SGraphView | undefined;
+        rectData = {
+            X: 0,
+            Y: 0,
+            Width: 500,
+            Height: 500,
+            Radius: 0,
+            Style: {
+                "Default":{
+                    "Stroke": "#cccccc",
+                    "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "LineWidth": 2,
+                    "Effect": {}
+                },
+                "Selected": {
+                    "Stroke": "#66ff66",
+                    "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "LineWidth": 3,
+                    "Effect": {}
+                },
+                "Disabled": {
+                    "Stroke": "#333333",
+                    "Fill": "#afafaf",
+                    "LineWidth": 1,
+                    "Effect": {}
+                },
+            }
+        };
+        mounted():void {
+            this.init()
+        };
+        init():void {
+            this.view = new SGraphView(this.id);
+            const scene = new SGraphScene();
+            const item = new ResizeRect(null, this.rectData);
+            scene.addItem(item);
+            item.selectable = true;
+            item.moveable = true;
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
+        };
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 0 - 3
docs/.vuepress/styles/palette.styl

@@ -19,6 +19,3 @@ canvas:focus{
 .el-table__body, .el-table__footer, .el-table__header{
   margin:0;
 }
-pre {
-  max-height: 800px;
-}

+ 2 - 0
docs/guides/engine/clip.md

@@ -2,3 +2,5 @@
 ::: details 目录
 [[toc]]
 :::
+
+裁剪方法从原始画布中剪切任意形状和尺寸。

+ 34 - 0
docs/guides/engine/selectContainer.md

@@ -0,0 +1,34 @@
+# 选择容器
+
+::: details 目录
+[[toc]]
+:::
+
+1.选择
+
+2.对齐
+
+3.置顶
+
+4.单个对象调整大小,多个不可以
+
+5.不支持旋转
+
+6.移动多个选中的对象
+
+7.支持8个点的调整
+
+8.鼠标移动到8个点的时候变化,点也跟随变换
+
+9.始终处于最顶层
+
+10.根据背景调整自身颜色
+
+11.点击选择器以外取消选择
+
+<engine-selectContainer />
+
+
+::: details 查看实例代码
+<<< @/docs/.vuepress/components/engine/selectContainer.vue
+:::

+ 1 - 0
docs/guides/index.js

@@ -22,6 +22,7 @@ const content = [
             ["/guides/engine/transform", "变型"],
             ["/guides/engine/clip", "裁剪"],
             ["/guides/engine/arrow", "绘制带有箭头的线段"],
+            ["/guides/engine/selectContainer", "选择容器"],
         ]
     },
     {