场景
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、完整示例代码
<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: 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);
});
},
},
};
</script>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136081.html
