場景

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>

總結

以上是生活随笔為你收集整理的Fabricjs在Canvas上插入照片并设置缩小和翻转属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。