画布大小变化和例子4

wangxinzhang · Oct 7, 2019 · 4b787ed · 4b787ed
1 parent 0148d32
commit 4b787ed
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 4 deletions.
diff --git a/src/App.js b/src/App.js
@@ -274,8 +274,8 @@ class App extends React.Component {
       visible: true
     });
     this.canvas_sprite.add(Shape);
-    if(action !=='update'){
-      this.changeActiveObjectValue()
+    if (action !== 'update') {
+      this.changeActiveObjectValue();
     }
   }
   async addTextObject(index, action) {
@@ -1066,6 +1066,10 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
   exportCode() {
     let canvas_sprite = this.canvas_sprite;
     var jsonData = canvas_sprite.toJSON();
+    jsonData.canvas = {
+      width: canvas_sprite.getWidth(),
+      height: canvas_sprite.getHeight()
+    };
     var canvasAsJson = JSON.stringify(jsonData);
     if (copy(/* 'export default' +  */ canvasAsJson)) {
       message.success(`导出成功,请复制查看代码`, 2);
@@ -1090,6 +1094,17 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
         clearTimeout(this.delayT);
         this.delayT = setTimeout(resolve, ms);
       });
+    let importCodeJson;
+    if (typeof this.state.importCodeJson === 'string') {
+      importCodeJson = JSON.parse(this.state.importCodeJson);
+    } else {
+      importCodeJson = this.state.importCodeJson;
+    }
+    this.canvas_sprite.setWidth(importCodeJson.canvas ? importCodeJson.canvas.width : '654'); //默认值
+    this.canvas_sprite.setHeight(importCodeJson.canvas ? importCodeJson.canvas.height : '1000'); //默认值
+    this.currentOptionArr[0].css['width'] = importCodeJson.canvas ? importCodeJson.canvas.width : '654';
+    this.currentOptionArr[0].css['height'] = importCodeJson.canvas ? importCodeJson.canvas.height : '1000';
+    this.currentOptionArr[0].css['background'] = importCodeJson.background;
     canvas_sprite.loadFromJSON(this.state.importCodeJson, async () => {
       let Objects = canvas_sprite.getObjects();
       for (let index = 0; index < Objects.length; index++) {
@@ -1263,6 +1278,8 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
             this.setState({
               visible: false
             });
+            this.canvas_sprite.discardActiveObject(); //取消激活对象
+            this.canvas_sprite.renderAll();
           }}
         >
           <div className='box'>

diff --git a/src/App.scss b/src/App.scss
@@ -59,6 +59,7 @@ input {
   /* .slide {
     margin-left: 30px;
   } */
+  margin-bottom: 150px;
   .placeholder {
     width: auto;
     flex: 1;

diff --git a/src/example/example3.js b/src/example/example3.js
diff --git a/src/example/example4.jpg b/src/example/example4.jpg
diff --git a/src/example/example4.js b/src/example/example4.js
diff --git a/src/example/index.js b/src/example/index.js
@@ -2,4 +2,5 @@ export default [
   require('./example1').default,
   require('./example2').default,
   require('./example3').default,
+  require('./example4').default,
 ]
diff --git a/src/optionArr.js b/src/optionArr.js
@@ -40,7 +40,7 @@ let optionArr = [
     type: 'rect',
     name: '矩形',
     css: {
-      //background: 'linear-gradient(280deg, #fedcba 0%, rgba(18, 52, 86, 1) 20%, #987 80%)',
+      //background: 'linear-gradient(190deg, rgba(243, 227, 223, 1) 20%, rgba(238, 214, 205, 1) 80%)',
       //background: 'radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)',
       width: 200,
       height: 122, //高度,没有的话就自适应