场景

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>

Fabricjs在Canvas上使用路径Path绘制不规则图形相关推荐

Three.js - 绘制不规则图形（二十）
Shape 形状通过路径来绘制二维形状平面.简单理解就是在一个平面上用不规则的线连接成一个图形. 想在three.js中展示需要使用ExtrudeGeometry,ShapeGeometry来生成几 ...
css绘制不规则图形
CSS绘制不规则图形在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
html怎么设置不规则图形,CSS3绘制不规则图形的一些方法示例
前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章能让你对不规则图形有一个初步的了解. 现在,我们已经可以使用CSS 3 常 ...
Unity使用bounds绘制不规则图形边框
Unity使用bounds绘制不规则图形边框 for (int i = 0; i < screenList.Count; i++) { if (screenList[i].activeSelf ...
canvas绘制不规则图形，点击获取当前图形索引
canvas给不规则图形添加点击事件有这么一个需求,把传过来的四个坐标,连成一个图形(可能是规则的,也可能是不规则的),点击某个图形,显示当前这个图形的信息 //数据格式 dataList: {lo ...
SVG动态绘制不规则图形
作者简介 wuyue 蚂蚁金服·数据体验技术团队在浏览器中,任意的二维平面图形均可以通过path路径的形式描述.然后底层api 直接静态绘制出来.但是如果想动态的绘制路径,浏览器是没有直接支持方式的 ...
CSS3绘制不规则图形（一）
由于近期的项目中出现了不规则的边框和图形, 所以只好提前先温习一下,以前收集的一些CSS3绘制的图形...样式绘制的图形比图片的性能要好,体验更佳. 废话不多说,我们直接看效果: 1.三角形系列(三角 ...
Fabricjs在Canvas上插入照片并设置缩小和翻转属性
场景 Fabricjs一个简单强大的Canvas绘图库快速入门: Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上, ...
微信小程序在一张canvas上把正方形图片绘制成圆形
因为最近在做分享功能,需要用户的头像在微信小程序中,然后写下其他文字,如何在把正方形图片放到canvas,导成圆角.找了两个参考资料,分别是用.clip()和.clearRect()两种方法微信小程 ...

Fabricjs在Canvas上使用路径Path绘制不规则图形

场景

实现

Fabricjs在Canvas上使用路径Path绘制不规则图形相关推荐

最新文章

热门文章