haojianlong 4 лет назад
Родитель
Сommit
6caf6d6c29

+ 1 - 1
docs/.vuepress/components/GitCode.vue

@@ -34,7 +34,7 @@
             required: false,
             default: 'typescript'
         }) type !: string;
-        baseUrl: string = '/git';
+        baseUrl: string = '/gogs';
         code: string = '';
         created() {
             this.init()

+ 109 - 0
docs/.vuepress/components/engine/clip.vue

@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <canvas :id="id" width="800" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
+    import {SCanvasView, SPainter, SPath, SColor} from "@persagy-web/draw/lib";
+
+    class ClipView extends SCanvasView{
+        img: CanvasImageSource;
+        _url: string = '';
+        arcX = 100;
+        arcY = 100;
+        stepX = 6;
+        stepY = 8;
+        timer: any;
+        set url(v:string){
+            if (this._url == v) {
+                return;
+            }
+            this._url = v;
+            // @ts-ignore
+            this.img.src = v;
+        }
+        get url():string{
+            return this._url;
+        }
+        isLoadOver: boolean = false;
+        constructor(id:string){
+            super(id);
+            this.img = new Image();
+            this.img.onload = (e) => {
+                this.isLoadOver = true;
+                this.update();
+            };
+            this.img.onerror = (e) => {
+                this.isLoadOver = false;
+                this.update();
+                console.log("加载图片错误!", e);
+            };
+        }
+        onDraw(painter: SPainter): void {
+            // @ts-ignore
+            painter.engine._canvas.save();
+            // painter.save();
+            painter.clearRect(0,0,800,400);
+            clearTimeout(this.timer);
+
+            painter.pen.color = SColor.Black;
+            painter.brush.color = SColor.Black;
+            painter.drawRect(0, 0, 800, 400);
+
+            painter.brush.color = SColor.Transparent;
+            let path = new SPath();
+            path.arc(this.arcX, this.arcY, 100, 0, Math.PI*2, 1);
+            painter.clip = path;
+
+            painter.drawPath(path);
+            // console.log('------->');
+            if (this.isLoadOver) {
+                painter.drawImage(this.img, 0, 0, 800, 400);
+            }
+            // painter.restore();
+            // @ts-ignore
+            painter.engine._canvas.restore();
+            this.timer = setTimeout(()=>{
+                if (this.arcX + 100 >= 800) {
+                    this.stepX *= -1;
+                }
+
+                if (this.arcX - 100 < 0) {
+                    this.stepX *= -1;
+                }
+
+                if (this.arcY + 100 >= 400) {
+                    this.stepY *= -1;
+                }
+
+                if (this.arcY - 100 < 0) {
+                    this.stepY *= -1;
+                }
+
+                this.arcX += this.stepX;
+                this.arcY += this.stepY;
+                this.update()
+            }, 17);
+        }
+    }
+
+    @Component
+    export default class SelectContainerCanvas extends Vue {
+        id: string = uuid();
+        view: ClipView | undefined;
+        img = require('../../public/assets/img/2.jpg');
+        mounted(): void {
+            this.init();
+        };
+        init():void{
+            this.view = new ClipView(this.id);
+            this.view.url= this.img;
+        };
+        beforeDestroy(): void {
+            clearTimeout(this.view!!.timer);
+        }
+    }
+</script>

+ 28 - 25
docs/.vuepress/components/scene/items/area.vue

@@ -6,43 +6,46 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import {SPath} from "@persagy-web/draw/lib";
+    import {SPath, SPainter, SRect} from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
 
     class sga extends SGraphItem{
-        constructor(parent){
+        path: SPath;
+        constructor(parent: SGraphItem | null){
             super(parent);
             this.path = new SPath();
-            this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:200,y:0}])
+            // @ts-ignore
+            this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:500,y:0}]);
+            // @ts-ignore
+            this.path.polygon([{x:0,y:0},{x:500,y:0},{x:300,y:500}]);
         }
-        onDraw(painter) {
-            console.log(this.path);
+        boundingRect(): SRect {
+            return new SRect(0,0,700,1500)
+        }
+
+        onDraw(painter: SPainter) {
             painter.drawPath(this.path)
         }
     }
 
-    export default {
-        name: "areaCanvas",
-        data(){
-            return{
-                id: 'area'+Date.now(),
-                view: ''
-            }
-        },
+    @Component
+    export default class AreaCanvas extends Vue {
+        id: string = uuid();
+        view: SGraphView | undefined;
         mounted() {
             this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView(this.id);
-                const scene = new SGraphScene();
-                const item = new sga(null);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                console.log(item)
-            }
+        };
+        init(){
+            this.view = new SGraphView(this.id);
+            const scene = new SGraphScene();
+            const item = new sga(null);
+            scene.addItem(item);
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
         }
     }
 </script>

+ 3 - 3
docs/.vuepress/config.js

@@ -4,7 +4,7 @@ const graphContent = require("../guides/index");
 module.exports = {
     title: "博锐尚格 Web 组件开发文档",
     description: "博锐尚格 Web 组件开发文档",
-    base: "/doc/web/",
+    base: "/web/",
     plugins: [
         "@vuepress/last-updated",
         "plugin-back-to-top",
@@ -118,12 +118,12 @@ module.exports = {
     },
     devServer :{
         proxy: {
-            '/git': {
+            '/gogs': {
                 target: 'http://39.106.8.246:3003',
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {
-                    '^/git': '',
+                    '^/gogs': '',
                 },
                 bypass: function(req, res, proxyOptions) {
                     req.headers["Authorization"] = "Basic bGJzbDoyMDIwMDgyOQ=="

BIN
docs/.vuepress/public/assets/img/2.jpg


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

@@ -4,3 +4,11 @@
 :::
 
 裁剪方法从原始画布中剪切任意形状和尺寸。
+
+clip() 执行前必须 ```beginPath()```,<font color=red> beginPath </font> 意为开始新的路径; 而 <font color=red> closePath </font>意为闭合路径 
+
+<engine-clip />
+
+::: details 查看实例代码
+<<< @/docs/.vuepress/components/engine/clip.vue
+:::

+ 4 - 4
package.json

@@ -1,9 +1,9 @@
 {
   "remote": {
-    "host": "47.94.89.44",
-    "path": "/opt/tomcat9/webapps/doc/web",
-    "user": "user1",
-    "password": "@)!^sagacloud",
+    "host": "47.93.22.124",
+    "path": "/opt/web/doc/web",
+    "user": "doc",
+    "password": "saga2020(^cloud==",
     "local": "docs/.vuepress/dist"
   },
   "scripts": {