随笔分类 -  Fabricjs

Fabricjs学习笔记
Fabricjs中canvas的事件绑定
摘要：var canvas = new fabric.Canvas('c') canvas.on({key:value,.....}) //key为eventname canvas.on('eventname',fun) canvas事件绑定源码↓ /** * Observes specified eve 阅读全文
posted @ 2022-04-07 17:25 聂小恶 阅读(697) 评论(0) 推荐(0)
Fabricjs给元素添加鼠标事件mouse:over/out/move
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2022-04-07 13:48 聂小恶 阅读(1512) 评论(1) 推荐(0)
Fabricjs-文字添加外部字体（初始化字体无效问题解决）
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2022-04-07 10:26 聂小恶 阅读(992) 评论(0) 推荐(0)
Fabricjs-new fabric.Pattern填充模板
摘要：(function() { var canvas = this.__canvas = new fabric.Canvas('c'); fabric.Object.prototype.transparentCorners = false function loadPattern(url) { //传入 阅读全文
posted @ 2022-04-06 16:40 聂小恶 阅读(799) 评论(0) 推荐(0)
Fabricjs-自定义类型
摘要：(function() { var canvas = this.__canvas = new fabric.Canvas('c') fabric.Object.prototype.transparentCorners = false //设置多边形角的可见性 var Cross = fabric.u 阅读全文
posted @ 2022-04-06 14:46 聂小恶 阅读(304) 评论(1) 推荐(0)
Fabricjs-easing
摘要：缓动函数 https://www.xuanfengge.com/easeing/easeing/ html页面不是重点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp 阅读全文
posted @ 2022-04-02 10:35 聂小恶 阅读(67) 评论(0) 推荐(0)
Fabricjs-canvas元素选中的样式效果
摘要：canvas的一些定制化 元素选择后的样式效果 http://fabricjs.com/customization 上面地址已经很全面了 阅读全文
posted @ 2022-03-31 16:32 聂小恶 阅读(234) 评论(0) 推荐(0)
Fabricjs-copy和paste
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2022-03-31 15:58 聂小恶 阅读(249) 评论(0) 推荐(0)
Fabricjs-video和摄像头
摘要：video被看做图片处理 new fabric.Image <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 阅读全文
posted @ 2022-03-31 14:26 聂小恶 阅读(557) 评论(0) 推荐(0)
Fabricjs 橡皮擦、取消橡皮擦、绘画、选择和喷雾
摘要：case "select": //选择 canvas.isDrawingMode = false //取消绘画模式 break; case "erase": //橡皮擦 canvas.freeDrawingBrush = new fabric.EraserBrush(canvas); canvas. 阅读全文
posted @ 2022-03-30 17:53 聂小恶 阅读(1666) 评论(0) 推荐(0)
fabricjs-添加自定义形状的图片img.set
摘要：fabric.Image.fromURL( 'http://fabricjs.com/assets/mononoke.jpg', function(img) { canvas.add(img.set({ left: 400, top: 350, clipPath: new fabric.Circle 阅读全文
posted @ 2022-03-30 17:42 聂小恶 阅读(608) 评论(0) 推荐(0)
fabricjs-动画效果animate
摘要：//canvas元素动画效果 function animate() { try { canvas .item(0) .animate("left", canvas.item(0).get("left") 300 ? "100" : "300", { duration: 1000, onChange: 阅读全文
posted @ 2022-03-30 17:34 聂小恶 阅读(727) 评论(0) 推荐(0)
Fabricjs-Image.filters
摘要：http://fabricjs.com/image-filters //上面是官网示例 //获取图片方法1 let urlImage fabric.Image.fromURL('./5678c3133aa8766011.jpg', function(img) { urlImage = img // 阅读全文
posted @ 2022-03-30 16:08 聂小恶 阅读(530) 评论(0) 推荐(0)
Fabric.js——基础操作，矩形，圆，线，文字，组，图片，旋转缩放，滤镜等
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2022-03-30 14:03 聂小恶 阅读(2671) 评论(0) 推荐(0)
Fabricjs-渐变new fabric.Gradient
摘要：var addCircle = function() { var circle = new fabric.Circle({ left: 100, top: 100, radius: 50 })//渐变样式定义 let gradient = new fabric.Gradient({ type: 'l 阅读全文
posted @ 2022-03-30 13:46 聂小恶 阅读(606) 评论(0) 推荐(0)