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.784080505
|
||
|
|
// console.log("toSVG="+canvas.toSVG());
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|