- 快速入门
- Fabric.js 介绍
- Part 1:Objects 对象、Canvas 画布、Images 图像、Paths 形状
- Part 2:Animation 动画、Image filters 图像滤镜、Colors 颜色、Gradients 渐变、Text 文本、Events 事件
- Part 3:Groups 组合、Serialization 序列化、Deserialization、SVG parser 反序列化、SVG 解析器、Subclassing
- Part 4:Free drawing 自由绘画、Customization 可定制化、Fabric on Node.js
- Part 5:Zoom and panning 缩放和平移
- Part 6:Using transformations 使用转换
- Part 7:对 Text 类进行子分类以生成位图文本
- Part 8:裁切 和 ClipPath 裁切路径
- 自定义控件 API
- FabricJS 的缺陷
- Fabric.js 对象缓存
- Fabric.js 示例:自定义控件、多边形
- Fabric.js 示例:与画布外的对象交互
- API
- BaseBrush
- Canvas
- Circle
- CircleBrush
- Color
- Ellipse
- Gradient
- Group
- Image
- Intersection
- IText
- Line
- Object
- Observable
- Path
- PathGroup
- Pattern
- PatternBrush
- PencilBrush
- Point
- Polygon
- Polyline
- Rect
- Shadow
- SprayBrush
- StaticCanvas
- Text
- Triangle
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
Fabric.js 示例:与画布外的对象交互
现在的网页,很少再使用传统的模式开发了,一般都是使用 Vue 等前端框架开发,提高了开发速度,但是如何与 Fabric.js 如何交互和操作是个问题,下面是一个简单的示例:
<template> <div class="groups"> <canvas id="canvas"></canvas> <button ref="btn">button</button> </div> </template> <script> import { fabric } from "fabric"; export default { data() { return { canvas: "", }; }, mounted() { var canvas = this.canvas = new fabric.Canvas("canvas", { width: 400, height: 400, backgroundColor: "#ddd", }); fabric.Object.prototype.originX = "center"; fabric.Object.prototype.originY= "center"; fabric.Canvas.prototype.getAbsoluteCoords = function(object){ console.log(this); console.log(object); return { left:object.left+this._offset.left, top:object.top+this._offset.top }; } var btn = this.$refs.btn, btnWidth = 85, btnHeight = 18; function positionBtn(obj){ var absCoords = canvas.getAbsoluteCoords(obj); btn.style.left = (absCoords.left - btnWidth/2)+'px'; btn.style.top = (absCoords.top - btnHeight/2)+'px'; } fabric.Image.fromURL("8972bd40735fa8d2f0c739e510fb30e240818.jpeg",function(img){ canvas.add(img.set({left:250,top:250,angle:30}).scale(0.25)); img.on("moving",()=>positionBtn(img)); img.on("scaling",()=>positionBtn(img)); positionBtn(img); }) }, }; </script> <style> button{ position: absolute; } </style>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论