29 lines
7.7 KiB
Vue
29 lines
7.7 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<canvas id="c" width="800" height="800"></canvas>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { fabric } from "fabric";
|
|
export default {
|
|
name: "FabricLoadFromJSON",
|
|
data() {
|
|
return {};
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
//加载json数据显示
|
|
var canvas = new fabric.Canvas("c");
|
|
canvas.loadFromJSON('{"layout_center":{"x":-372,"y":-158},"config":{"background_color":"#fff","scale":1,"position_center":{"x":-333,"y":-113},"svg_position_center":{"x":50,"y":50},"grid":true,"ruler":true},"done_json":[{"id":"custom-svg-bdOMu00yh2Y0","x":884,"y":407,"client":{"x":884,"y":407},"scale_x":1,"scale_y":1,"rotate":0,"actual_bound":{"x":49,"y":39,"width":62,"height":20},"point_coordinate":{"tl":{"x":776.10009765625,"y":397},"tc":{"x":884,"y":397},"tr":{"x":991.89990234375,"y":397},"l":{"x":776.10009765625,"y":407},"r":{"x":991.89990234375,"y":407},"bl":{"x":776.10009765625,"y":417},"bc":{"x":884,"y":417},"br":{"x":991.89990234375,"y":417}},"name":"custom-svg-bd","title":"绑定指标","tag":"custom-svg-text","type":"CustomSvg","display":true,"config":{"can_zoom":true,"have_anchor":true,"actual_rect":true},"props":{"text":{"title":"文字内容","type":"Input","val":"A相相电压总有效值-平均值:###","disabled":true},"fontFamily":{"title":"字体","type":"Select","val":"Microsoft YaHei","options":[{"value":"Microsoft YaHei","label":"微软雅黑"},{"value":"NSimSun","label":"新宋体"}]},"fontSize":{"title":"文字大小","type":"InputNumber","val":15},"fill":{"title":"文字颜色","type":"Color","val":"#1324E4"}},"common_animations":{"val":"","delay":"delay-0s","speed":"slow","repeat":"infinite"},"lineId":["67f7441e575a3e1ac357cca3d69c053a","3f1693bf27b5f597266f1557aa782527","01f68339d5a2f6a0b3afd0cabbcd9a31","11111"],"UID":["be418855a35158a086c132b81411c222","be418855a35158a086c132b81411c222PhV","be418855a35158a086c132b81411c222PhVA","be418855a35158a086c132b81411c222PhVAavg"],"UName":"PhV$A$avg"},{"id":"el-button-JumpPq1ZzhIBn2","x":1568,"y":90,"client":{"x":1568,"y":90},"scale_x":1,"scale_y":1,"rotate":0,"actual_bound":{"x":20,"y":34,"width":60,"height":32},"point_coordinate":{"tl":{"x":1534,"y":74},"tc":{"x":1568,"y":74},"tr":{"x":1602,"y":74},"l":{"x":1534,"y":90},"r":{"x":1602,"y":90},"bl":{"x":1534,"y":106},"bc":{"x":1568,"y":106},"br":{"x":1602,"y":106}},"name":"el-button-Jump","tag":"el-button","title":"跳转","type":"Vue","config":{"can_zoom":true,"have_anchor":true,"actual_rect":true},"display":true,"props":{"size":{"title":"尺寸","type":"Select","val":"default","options":[{"label":"大","value":"large"},{"label":"默认","value":"default"},{"label":"小","value":"small"}]},"type":{"title":"类型","type":"Select","val":"primary","options":[{"label":"主要按钮","value":"primary"},{"label":"成功按钮","value":"success"},{"label":"警告按钮","value":"warning"},{"label":"危险按钮","value":"danger"},{"label":"信息按钮","value":"info"}]},"plain":{"title":"朴素按钮","type":"Switch","val":false},"text":{"title":"文字按钮","type":"Switch","val":false}},"tag_slot":"测试3","common_animations":{"val":"","delay":"delay-0s","speed":"slow","repeat":"infinite"},"JumpID":"11"},{"id":"custom-svg-textY96zkSRUGA","x":985,"y":316,"client":{"x":985,"y":316},"scale_x":1,"scale_y":1,"rotate":0,"actual_bound":{"x":49,"y":39,"width":92,"height":20},"point_coordinate":{"tl":{"x":939,"y":306},"tc":{"x":985,"y":306},"tr":{"x":1031,"y":306},"l":{"x":939,"y":316},"r":{"x":1031,"y":316},"bl":{"x":939,"y":326},"bc":{"x":985,"y":326},"br":{"x":1031,"y":326}},"name":"custom-svg-text","title":"文字","tag":"custom-svg-text","type":"CustomSvg","display":true,"config":{"can_zoom":true,"have_anchor":true,"actual_rect":true},"props":{"text":{"title":"文字内容","type":"Input","val":"测试1页面"},"fontFamily":{"title":"字体","type":"Select","val":"Microsoft YaHei","options":[{"value":"Microsoft YaHei","label":"微软雅黑"},{"value":"NSimSun","label":"新宋体"}]},"fontSize":{"title":"文字大小","type":"InputNumber","val":15},"fill":{"title":"文字颜色","type":"Color","val":"#000"}},"common_animations":{"val":"","delay":"delay-0s","speed":"slow","repeat":"infinite"}},{"id":"test232323dRRWPLgLUc","x":594,"y":156,"client":{"x":594,"y":156},"scale_x":1,"scale_y":1,"rotate":0,"actual_bound":{"x":2.364128589630127,"y":0.5552254319190979,"width":89.78407287597656,"height":89.7840805053711},"point_coordinate":{"tl":{"x":549.1079635620117,"y":111.10795974731445},"tc":{"x":594,"y":111.10795974731445},"tr":{"x":638.8920364379883,"y":111.10795974731445},"l":{"x":549.1079635620117,"y":156},"r":{"x":638.8920364379883,"y":156},"bl":{"x":549.1079635620117,"y":200.89204025268555},"bc":{"x":594,"y":200.89204025268555},"br":{"x":638.8920364379883,"y":200.89204025268555}},"first":"svg文件","second":"电力状态图元","name":"test232323","title":"测试新增","code":"sssss","type":"File","url":"http://192.168.1.13:9009/excelreport/topology/9D2427F7F60A4BFE8DC41EBAE482EBC3.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20230712%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230712T064919Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=eba4ed8ca130eb8e9d720f0eaea23c5be3ca24079665702123abc774ef71ce1b","width":52,"height":52,"config":{"can_zoom":true,"have_anchor":true,"actual_rect":true},"display":true,"props":{"fill":{"title":"填充色","type":"Color","val":"#00f"}},"common_animations":{"val":"","delay":"delay-0s","speed":"slow","repeat":"infinite"}},{"id":"test232323wA988YO5zX0","x":733,"y":252,"client":{"x":733,"y":252},"scale_x":1,"scale_y":1,"rotate":0,"actual_bound":{"x":7.541015625,"y":2.9460036754608154,"width":86.81502532958984,"height":86.88732147216797},"point_coordinate":{"tl":{"x":689.5924873352051,"y":208.55633926391602},"tc":{"x":733,"y":208.55633926391602},"tr":{"x":776.4075126647949,"y":208.55633926391602},"l":{"x":689.5924873352051,"y":252},"r":{"x":776.4075126647949,"y":252},"bl":{"x":689.5924873352051,"y":295.443660736084},"bc":{"x":733,"y":295.443660736084},"br":{"x":776.4075126647949,"y":295.443660736084}},"first":"svg文件","second":"电力状态图元","name":"test232323w","title":"测试新增","code":"sssss","type":"File","url":"http://192.168.1.13:9009/excelreport/topology/2753C4F462B54A298794DC75DB5F70C3.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20230712%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230712T064841Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=29b679bc72398547dcf872eab053e286dcdd4cad7c2bf7540c7bc73450fa5361","width":52,"height":52,"config":{"can_zoom":true,"have_anchor":true,"actual_rect":true},"display":true,"props":{"fill":{"title":"填充色","type":"Color","val":"#00ff00"}},"common_animations":{"val":"","delay":"delay-0s","speed":"slow","repeat":"infinite"}},{"id":"zd3D1XzvHQqj","x":1273,"y":481,"client":{"x":1273,"y":481},"scale_x":1,"scale_y":1,"rotate":0,"actual_bound":{"x":18.900001525878906,"y":6.200002193450928,"width":62.5,"height":93.79999542236328},"point_coordinate":{"tl":{"x":1241.75,"y":434.10000228881836},"tc":{"x":1273,"y":434.10000228881836},"tr":{"x":1304.25,"y":434.10000228881836},"l":{"x":1241.75,"y":481},"r":{"x":1304.25,"y":481},"bl":{"x":1241.75,"y":527.8999977111816},"bc":{"x":1273,"y":527.8999977111816},"br":{"x":1304.25,"y":527.8999977111816}},"name":"zd","title":"充电","type":"File","config":{"can_zoom":true,"have_anchor":true,"actual_rect":true},"display":true,"props":{},"state":{"OnOff":{"title":"开关","default":false,"props":{"fill":{"openVal":"#00ff00","closeVal":"#ff0000"},"fill-opacity":{"openVal":"0","closeVal":"1"}}}},"common_animations":{"val":"","delay":"delay-0s","speed":"slow","repeat":"infinite"}}]}');
|
|
// console.log("toSVG="+canvas.toSVG());
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|