从 VueJS 子组件调整 FabricJS 画布的大小答案

【问题标题】：Resize FabricJS canvas from VueJS child component从 VueJS 子组件调整 FabricJS 画布的大小
【发布时间】：2022-01-19 21:02:33
【问题描述】：

使用 VueJS 和 FabricJS，每当用户将尺寸输入侧边栏组件时，我都会尝试更改画布的大小。我希望画布大小在输入尺寸时动态变化。

我正在使用 $emit 从孩子到父母，但它似乎没有做任何事情。

SideBar.vue

   <template>
     <div class="control-bar">
        <b-sidebar position="static" open >
           <b-menu-list>
               <b-menu-item label="Height">
                   <b-field>
                       <b-input v-model="height" maxlength="5" @change="emitHeight()"></b-input>
                   </b-field>
               </b-menu-item>
               <b-menu-item>
                   <b-field>
                       <b-input v-model="width" maxlength="5" @change="emitWidth()"></b-input>
                   </b-field>
               </b-menu-item>
           </b-menu-list>
        </b-sidebar>
     </div>
  </template>

  <script>
    export default {
      data() {
       return {
           width: '640',
           height: '480',
       }
      },
      methods: {
        emitWidth() {
           this.$emit('changeWidth', this.width)
        },
        emitHeight() {
           this.$emit('changeHeight', this.height)
        }
      },
    }
  </script>

Canvas.vue

<template>
    <div class="columns">
        <section class="section canvas-section column auto">
            <SideBar @changeWidth="widthChange($event)" @changeHeight="heightChange($event)" />
        </section>
        <section class="section canvas-section column is-10 canvas-column">
            <canvas class="canvas" ref="can"></canvas>
        </section>
    </div>
</template>

<script>
import {fabric } from 'fabric'
import SideBar from '../components/SideBar.vue'

export default {
    data() {
        return {
            canvasHeight: '480',
            canvasWidth: '640',
            canvas: null
        }
    },
    components: {
        SideBar
    },
    methods: {
        heightChange (height) {
            this.canvasHeight = height;
            this.canvas.setHeight = this.canvasHeight;
        },
        widthChange (width) {
            this.canvasWidth = width;
            this.canvas.setWidth = this.canvasWidth;
        }
    },
    mounted() {
        const ref = this.$refs.can;
        this.canvas = new fabric.Canvas(ref);
    }
    
}
</script>

<style scoped>
    .canvas-column {
        width: 100%;
        height: 100%;
        background-color: lightgrey;
        text-align: center;
    }
    .canvas {
        border: 1px solid darkgrey;
        margin-left: auto;
        margin-right: auto;
    }
    .canvas-section {
        padding: 0;
    }
</style>

【问题讨论】：

标签： javascript vue.js canvas html5-canvas fabricjs

【解决方案1】：

heightChange (height) {
    this.canvasHeight = height;
    this.canvas.setHeight = this.canvasHeight;
},
widthChange (width) {
    this.canvasWidth = width;
    this.canvas.setWidth = this.canvasWidth;
}

setHeight 和 setWidth 是接受参数的方法。因此，与其将其分配为属性，不如将其更新为使用方法语法。

 this.canvas.setHeight(this.canvasHeight);
 this.canvas.setWidth(this.canvasWidth);

http://fabricjs.com/docs/fabric.Canvas.html#setWidth http://fabricjs.com/docs/fabric.Canvas.html#setHeight

代码沙盒： https://codesandbox.io/s/fabric-js-stackoverflow-problem-4g4x2

【讨论】：