Fabricjs在Canvas上插入照片并设置缩小和翻转属性 | 您所在的位置:网站首页 › js如何添加图片然后展示出来 › Fabricjs在Canvas上插入照片并设置缩小和翻转属性 |
场景
Fabricjs一个简单强大的Canvas绘图库快速入门: Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样在Canvas中插入照片并设置缩小和翻转属性。 注: 博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现1、官方教程 Introduction to Fabric.js. Part 1. — Fabric.js Javascript Canvas Library 2、添加一张照片 3、添加照片到Canvas并缩小图像和翻转它 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); });4、完整示例代码 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: 100, //距离画布左侧的距离,单位是像素 top: 100, //距离画布上边的距离 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); }); }, }, }; |
CopyRight 2018-2019 实验室设备网 版权所有 |