场景
Fabricjs在Canvas上插入照片并设置缩小和翻转属性:
Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基础上怎样实现绘制不规则图形
注:
博客:
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、官方教程地址
Introduction to Fabric.js. Part 1. — Fabric.js Javascript Canvas Library
2、使用路径绘图
用点和线的移动的方式进行绘图。通过对 线、曲线、弧的应用绘制非常复杂的图形。
在fabric.Path( )方法中,“M”代表“移动”命令,这个“M 00” 代表把画笔移动到(0,0)点坐标。
“L”代表“线”,“L 200 100 ”的意思是使用钢笔画一条线,从(0,0)坐标画到(200,100)坐标。 “z” 代表让图形闭合路径。
画好三角形后,我们可以用set( )方法对三角形的位置、颜色、角度、透明度等属性进行设置。
具体代码如下:
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ left: 120, top: 120,fill:'red' });canvas.add(path);
3、完整示例代码
<template><div><div><canvas id="c" width="800" height="800"></canvas></div></div></template><script>import { fabric } from "fabric";export default {name: "HelloFabric",data() {return {};},mounted() {this.init();},methods: {init() {// create a wrapper around native canvas element (with id="c")// 声明画布var canvas = new fabric.Canvas("c");// create a rectangle object// 绘制图形var rect = new fabric.Rect({left: 80, //距离画布左侧的距离,单位是像素top: 80, //距离画布上边的距离fill: "red", //填充的颜色width: 20, //方形的宽度height: 20, //方形的高度});// "add" rectangle onto canvas//添加图形至画布canvas.add(rect);//添加图片fabric.Image.fromURL('images/light.png', function(oImg) {// scale image down, and flip it, before adding it onto canvas//缩小图像并翻转它oImg.scale(0.5).set('flipX', true);canvas.add(oImg);});//绘制不规则图形var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ left: 120, top: 120,fill:'red' });canvas.add(path);},},};</script>