哪个网站可以帮助做数学题,哪些网站可以做微信推送,陶瓷类网站建设,手表网站背景fabric.js是可以简化canvas编写的js库#xff0c;提供canvas缺少的对象模型#xff0c;包含动画、数据序列化和反序列化的等高级功能的js库#xff0c;开源项目#xff0c;在GitHub有很多人贡献。 官网#xff1a;Fabric.js Javascript Canvas Library (fabricjs.com) 文档… fabric.js是可以简化canvas编写的js库提供canvas缺少的对象模型包含动画、数据序列化和反序列化的等高级功能的js库开源项目在GitHub有很多人贡献。 官网Fabric.js Javascript Canvas Library (fabricjs.com) 文档JSDoc: Home (fabricjs.com) 示例Demos — Fabric.js Javascript Canvas Library (fabricjs.com) fabric.js笔记 对象 fabric.Circle 圆fabric.Ellipse 椭圆fabric.Line 直线fabric.Polygonfabric.Polylinefabric.Rect 矩形fabric.Triangle 三角形 方法 add(object) 添加insertAt(object,index) 添加remove(object) 移除forEachObject 循环遍历getObjects() 获取所有对象item(int) 获取子项isEmpty() 判断是否空画板size() 画板元素个数contains(object) 查询是否包含某个元素fabric.util.cosfabric.util.sinfabric.util.drawDashedLine 绘制虚线getWidth() setWidth()getHeight()clear() 清空renderAll() 重绘requestRenderAll() 请求重新渲染rendercanvas() 重绘画板getCenter().top/left 获取中心坐标toDatalessJSON() 画板信息序列化成最小的jsontoJSON() 画板信息序列化成jsonmoveTo(object,index) 移动dispose() 释放setCursor() 设置手势图标getSelectionContext()获取选中的contextgetSelectionElement()获取选中的元素getActiveObject() 获取选中的对象getActiveObjects() 获取选中的多个对象discardActiveObject()取消当前选中对象isType() 图片的类型setColor(color) canvas.set(full,);rotate() 设置旋转角度setCoords() 设置坐标 事件 object:addedobject:removedobject:modifiedobject:rotatingobject:scalingobject:movingobject:selected 这个方法v2已经废弃使用selection:created替代多选不会触发before:selection:clearedselection:clearedselection:updatedselection:createdpath:createdmouse:downmouse:movemouse:upmouse:overmouse:outmouse:dblclick 常用属性 canvas.isDrawingMode true; 可以自由绘制canvas.selectable false; 控件不能被选择不会被操作canvas.selection true; 画板显示选中canvas.skipTargetFind true; 整个画板元素不能被选中canvas.freeDrawingBrush.color #E34F51 设置自由绘画笔的颜色freeDrawingBrush.width 自由绘笔触宽度 IText的方法 selectAll() 选择全部getSelectedText() 获取选中的文本exitEditing() 退出编辑模式 图片去掉选中边框和旋转且只能移动不可操作 oImg.hasControls false; 只能移动不能编辑操作oImg.hasBorders false; 去掉边框可以正常操作hasRotatingPoint false; 不能被旋转hasRotatingPoint 控制旋转点不可见 用法示例 fabric.Image.fromURL(300.jpg, function (oImg) { canvas.add(oImg); oImg.hasControls oImg.hasBorders false; }); 动画 第一个参数是动画的属性第二个参数是动画的最终位置第三个参数是一个可选的对象指定动画的细节持续时间回调动效等。 第三个参数主要有 duration 默认为 500ms。可以用来改变动画的持续时间。 from 允许指定动画属性的起始值如果我们不希望使用当前值。 onComplete 动画结束之后的回调。 easing 动效函数。 绝对动画 用法示例 let canvas new fabric.Canvas(canvas);let rect new fabric.Rect({ left: 400, //距离左边的距离 top: 200, //距离上边的距离 fill: green, //填充的颜色 width: 200, //宽度 height: 200, //高度});rect.animate(left, 100, { onChange: canvas.renderAll.bind(canvas), duration: 1000,});canvas.add(rect); 相对动画(第二个参数通过,-等来决定动画的最终效果) rect.animate(left, 100, { onChange: canvas.renderAll.bind(canvas), duration: 1000,}); 定义动画的动效函数 默认情况下动画使用“easeInSine”动效执行。如果这不是你需要的fabric 为我们提供了很多内置动画效果, fabric.util.ease 下有一大堆动效的选项。 常用的有easeOutBounce,easeInCubiceaseOutCubiceaseInElasticeaseOutElasticeaseInBounce 和 easeOutExpo等用法示例 rect.animate(left, 100, { onChange: canvas.renderAll.bind(canvas), duration: 1000, easing: fabric.util.ease.easeOutBounce,}); 图像滤镜 目前 Fabric 为我们提供了以下内置滤镜 BaseFilter 基本过滤器 Blur 模糊 Brightness 亮度 ColorMatrix 颜色矩阵 Contrast 对比 Convolute 卷积 Gamma 伽玛 Grayscale 灰度 HueRotation 色调旋转 Invert 倒置 Noise 噪音 Pixelate 像素化 RemoveColor 移除颜色 Resize 调整大小 Saturation 饱和 用法示例 fabric.Image.fromURL(require(./aaa.jpeg), (img) { img.scale(0.5); // 添加滤镜 img.filters.push(new fabric.Image.filters.Grayscale()); // 图片加载完成之后应用滤镜效果 img.applyFilters(); img.set({ left: 300, top: 250, }); canvas.add(img);}); 以原点为中心左上角缩放画布 // 监听鼠标滚轮事件 canvas.on(mouse:wheel, opt { let delta opt.e.deltaY // 滚轮向上滚一下是 -100向下滚一下是 100 let zoom canvas.getZoom() // 获取画布当前缩放值 // 控制缩放范围在 0.01~20 的区间内 zoom * 0.999 ** delta if (zoom 20) zoom 20 if (zoom 0.01) zoom 0.01 // 设置画布缩放比例 canvas.setZoom(zoom) }) 以鼠标指针为中心缩放画布 // 监听鼠标滚轮事件 canvas.on(mouse:wheel, opt { let delta opt.e.deltaY // 滚轮向上滚一下是 -100向下滚一下是 100 let zoom canvas.getZoom() // 获取画布当前缩放值 // 控制缩放范围在 0.01~20 的区间内 zoom * 0.999 ** delta if (zoom 20) zoom 20 if (zoom 0.01) zoom 0.01 canvas.zoomToPoint( { x: opt.e.offsetX, // 鼠标x轴坐标 y: opt.e.offsetY // 鼠标y轴坐标 }, zoom // 最后要缩放的值 ) opt.e.preventDefault() opt.e.stopPropagation() }) 点击按钮控制缩放 // html button clicksetZoom(0.1)放大/button button clicksetZoom(-0.1)缩小/button // js // 点击控制缩放 setZoom(val) { let zoom this.canvas.getZoom() parseFloat(val); zoom Math.max(0.2, zoom); zoom Math.min(5, zoom); let backPoint this.canvas.getCenterPoint(); console.log(backPoint); this.canvas.zoomToPoint(backPoint, zoom); }, 拖拽 canvas.selection false; canvas.on(mouse:down, opt { // 鼠标按下时触发 let evt opt.e canvas.isDragging true // isDragging 是自定义的开启移动状态 canvas.lastPosX evt.clientX // lastPosX 是自定义的 canvas.lastPosY evt.clientY // lastPosY 是自定义的 }) canvas.on(mouse:move, opt { // 鼠标移动时触发 console.log(查看e,opt); if (canvas.isDragging) { let evt opt.e let vpt canvas.viewportTransform // 聚焦视图的转换 vpt[4] evt.clientX - canvas.lastPosX vpt[5] evt.clientY - canvas.lastPosY canvas.requestRenderAll() // 重新渲染 canvas.lastPosX evt.clientX canvas.lastPosY evt.clientY canvas.requestRenderAll() // 重新渲染 } }) canvas.on(mouse:up, opt { // 鼠标松开时触发 canvas.setViewportTransform(canvas.viewportTransform) // 设置此画布实例的视口转换 canvas.isDragging false // 关闭移动状态 }) 画布保存与恢复 var json canvas.cloneJSON(); // 将画布状态序列化为 JSON 对象 console.log(json); // 可以将此 JSON 对象保存到服务器或进行其他操作 // 从 JSON 恢复画布状态 var newCanvas new fabric.Canvas(newCanvas); newCanvas.loadFromJSON(json); // 从 JSON 对象恢复画布状态 背景图 fabric.Image.fromURL(../../images/bg.jpg, img { canvas.setBackgroundImage(img) canvas.backgroundVptfalse;//背景图锁定即不随画布缩放而改变 canvas.renderAll() }) 设置完背景图再执行 canvas.renderAll() 才会重新渲染不然画面看上去是没效果的。
