function can_init({id="canvas",init,target,resize,resizePass}){
/**初始化画布大小
@*resize 【函数:监听窗口大小回调,停止时回调一次】
@*resizePass 【函数:监听窗口大小过程回调，重复回调直到停止】
@*id 【String:canvas画布id】【default:"canvas"】
@*target 【目标对象】
@*init 【初始化回调】
**/
const t = 0;//定时器
const canvas = new fabric.Canvas(id,{
width:window.innerWidth,
height:window.innerHeight
})
// canvas.renderOnAddition = true;
if(init)init({canvas:canvas,tis:target})
// 监听窗口大小改变画布大小保持全屏
if(resize){
window.addEventListener('resize',resizefn,false);
};
function resizefn(){
// 监听窗口大小重置画布
if(resizePass)resizePass({tis:target})
clearTimeout(t);
setTimeout(()=>{
const canvas =new fabric.Canvas('canvas',{
width:window.innerWidth,
height:window.innerHeight
})
if(resize)resize({canvas:canvas,tis:target})
},200)
};
}
<template>
<div class="home">
<!-- <img alt="Vue logo" src="../assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<div v-if="resetCanvas"><canvas id="canvas"></canvas></div>
<controlpanel></controlpanel>
<button @click="test" class="test">test button</button>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import controlpanel from '@/components/canvas/controlpanel.vue'
import {can_init} from '@/utils/canvasInit'
import {mapState, mapGetters, mapMutations} from 'vuex'
export default {
name: 'Home',
data(){
return {
resetCanvas:true,
t:0,
canvas:null
}
},
computed:{
// 把 `this.name` 映射为 `this.$store.state.name`
...mapState({
$canvas: state => state.canvas
}),
...mapGetters('cans',[
// 把 `this.getName` 映射为 `this.$store.getters.getName`
"getTest"
])
},
components: {
controlpanel
},
mounted(){
this.$nextTick(()=>{
can_init({
target:this,
init({canvas,tis}){
tis.initFabric({canvas:canvas})
tis.canvas = canvas
// var rect = new fabric.Rect({
// left:100,//距离画布左侧的距离，单位是像素
// top:100,//距离画布上边的距离
// fill:'red',//填充的颜色
// width:30,//方形的宽度
// height:30,//方形的高度
// selectable:true//方形的高度
// });
// var rect1 = new fabric.Rect({
// left:200,//距离画布左侧的距离，单位是像素
// top:200,//距离画布上边的距离
// fill:'red',//填充的颜色
// width:30,//方形的宽度
// height:30//方形的高度
// });
// console.log(rect)
// canvas.add(rect);
}
})
})
},
methods:{
...mapMutations([
// 将 `this.mutationSetName()` 映射为 `this.$store.commit('mutationSetName')`
'initFabric'
]),
addgemo(){
console.log(this.$canvas)
},
test(){
var rect = new fabric.Rect({
left:0,//距离画布左侧的距离，单位是像素
top:0,//距离画布上边的距离
fill:'red',//填充的颜色
width:30,//方形的宽度
height:30,//方形的高度
hasControls: true,
});
// var rect1 = new fabric.Rect({
// left:200,//距离画布左侧的距离，单位是像素
// top:200,//距离画布上边的距离
// fill:'red',//填充的颜色
// width:30,//方形的宽度
// height:30//方形的高度
// });
// console.log(rect)
// rect.setAngle()
// rect.setCoords()
this.canvas.add(rect);
this.canvas.renderAll()
}
}
}
</script>
<style lang="less">
.home {
width: 100vw;height: 100vh;
}
.test {
position:fixed;top:0px;left:0px;
}
</style>
vue中如果使用创建Ref类型的fabric.Canvas，在添加椭圆fabric.Circle时，该椭圆也需要使用Ref类型，否则会出现选中时只能移动不能缩放，即fabric.Canvas和fabric.Circle要么都是变量，要么都是Ref类型，具体原因未分析
不知道你这个问题是否已经解决, 如果还没有解决的话: