FabricJs项目【简易画板】--矩形&三角形

b站 FabricJs项目【简易画板】--矩形&三角形

fabricjs 相关代码

<button @click="rectDraw()" class="rectDrawBtn">矩形</button>
<button @click="triangleDraw()" class="triangleDrawBtn">三角形</button>

rectDraw(){
    this.currentType = 'rect';
    this.initRect();
},
triangleDraw(){
    this.currentType = 'triangle';
    this.initTriangle();
},

initRect(){
    let left = this.mouseFrom.x;
    let top = this.mouseFrom.y;
    let width = this.mouseTo.x - this.mouseFrom.x;
    let height = this.mouseTo.y - this.mouseFrom.y;
    let  canvasObject = new fabric.Rect({
        left: left,
        top: top,
        width : width, 
        height : height,
        stroke: this.colors,
        fill: "rgba(255, 255, 255, 0)",
        strokeWidth: this.strokeWidth
    });
    this.toggleDrawingObject(canvasObject);
},
initTriangle(){
    let left = this.mouseFrom.x;
    let top = this.mouseFrom.y;
    let height = this.mouseTo.y - this.mouseFrom.y;
    let width = Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2));
    let  canvasObject = new fabric.Triangle({
        left: left,
        top: top,
        width : width, 
        height : height,
        stroke: this.colors,
        fill: "rgba(255, 255, 255, 0)",
        strokeWidth: this.strokeWidth
    });
    this.toggleDrawingObject(canvasObject);
},

步骤

1. 添加 button
2. 添加 方法
3. 添加 对应的object到canvas

参考

1. 官网地址
2. github 项目地址

联系我

加我的wx:wx:meethaowu,关注我的公众号:大前端说。欢迎交流关于前端的任何话题。