首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Fabric.js 3个api设置画布宽高

本文简介 使用 Fabric.js 创建画布时,可以在参数里配置画布的宽高。 除了初始化时设置之外,Fabric.js 还提供了其他 api 供后期修改画布宽高。...本文列举了 Fabric.js 的3个 api 设置画布宽高。 这3个 api 虽然简单,但在实际开发中可能很重要。比如监听浏览器窗口缩放,动态调整画布的宽高。...实际操作 本例使用了3个 api : canvas.setWidth:设置画布宽度 canvas.setHeight:设置画布高度 Canvas.setDimensions:设置画布大小 ...let canvas = null // 设置画布宽度 function setWidth(width) { canvas.setWidth(width) } // 设置画布高度...,此时可以在画布上框选 canvas = new fabric.Canvas('canvasBox', { width: 100, height: 100 })

2K40
您找到你想要的搜索结果了吗?
是的
没有找到

Fabric.js 元素被选中时保持原有层级🥁

不知道你在使用 Fabric.js 时有没有发现,如果一个画布存在多个元素,而且它们之前是层叠的,当你选中底层的元素时,那个元素会跳到最顶层;当你释放该元素后,它又跑回原有层级。...如果你不希望操作时出现这种情况,你希望在元素被选中时还保持它原有的层级,那么我推荐你在初始化画布时,设置 preserveObjectStacking true 。...《preserveObjectStacking 文档》 接下来我举例说明该属性的效果用法。 默认情况 默认情况是被选中的元素会跑到最顶层,当它被释放后又跑回原来的层级。.../ 填充a 橙色 width: 60, // 宽度 60px height: 60 // 高度 60px }) // 矩形添加到画布中 canvas.add(circle...那么你可以在初始化画布 preserveObjectStacking 设为 true // 省略部分代码 const canvas = new fabric.Canvas('canvasBox'

2.3K40

Fabric.js 锁定背景图,不受缩放拖拽的影响🎃

如果你的项目有画布拖拽、缩放等功能,而且你不希望背景图跟随拖拽或缩放,那一定要往下读。 本文主要讲解如何锁定背景图,锁定背景图其实只需设置1个属性即可。...本文会添加滚轮缩放画布、拖拽画布等功能来测试 “锁定背景图” 的效果。 应该可以清晰看出,不管如何拖拽缩放画布,背景图都纹丝不动。...-- 引入 Fabric.js --> ...**设置了这个,背景图就不会再移动了,不受视口的变化影响。 添加背景图、矩形圆形 为了方便演示,我要设置一个背景图两个图形元素,缩放时只会修改图形元素,背景图是一动不动的。...width: 60, // 宽度 60px height: 60 // 高度 60px }) // 矩形添加到画布中 canvas.add(circle, rect) 复制代码 设置完背景图再执行

2.9K20

Fabric.js 居中元素 🎗️

本文总结了 Fabric.js 常用的元素居中的方法,其中包括: 基于视窗的水平居中 基于画布的水平居中 带动画效果的水平居中 基于视窗的垂直居中 基于画布的垂直居中 带动画效果的垂直居中 同时实现水平和垂直居中...阅读本文需要你有一定的 Fabric.js 基础,如果还不太了解 Fabric.js 是什么,可以阅读 《Fabric.js 从入门到膨胀》 创建基础项目 为了方便演示,我在初始化画布的时: 添加一个背景图... // 初始化画布 const canvas = new fabric.Canvas('canvasBox') // 设置背景图 fabric.Image.fromURL...img => { canvas.setBackgroundImage( img, canvas.renderAll.bind(canvas), { // 背景图的宽高设置画布的宽高...60px height: 60, // 高度 60px originX: 'center', originY: 'center' }) // 矩形添加到画布

3.5K20

Fabric.js 从入门到________

('canvas', { width: 300, // 画布宽度 height: 300, // 画布高度 backgroundColor: '#eee' // 画布背景色...'orange', // 填充 橙色 width: 100, // 宽度 100px height: 100 // 高度 100px }) // 矩形添加到画布中...M:可以理解新的起始点x,y坐标 L:每个折点的x,y坐标 z:自动闭合(自动把结束点起始点连接起来) 文本 Fabric.js 有3类跟文本相关的 api。...---- 缩放和平移画布 本节案例在线预览 - 平移缩放画布 本节代码仓库 缩放画布 以原点基准缩放画布 要缩放画布,其实是在监听鼠标事件。...如需移动,立刻转换画布视图模式 画布移动到 鼠标xy轴坐标 。 鼠标松开 mouse:up 把画布定格在鼠标松开的坐标。

12.3K50

Fabric.js 文本自动换行的实现方式

本文简介 点赞 + 关注 + 收藏 = 学会了 在 fabric.js 提供的文本组件中,默认状态是不会自动换行。...我建议是在初始化时设置好 Textbox 的宽度,然后再将 splitByGrapheme 设置 true 。...200, left: 20, top: 20, splitByGrapheme: true, // 自动换行 }) // 文本添加到画布中 canvas.add(...禁止用户调整文本框高度 了解过 fabric.js 的工友都知道,fabric.js 默认是允许用户缩放元素的。 如果 Textbox 元素的在页面上被用户垂直拉伸,里面的文本就会变形。...在没 splitByGrapheme 设置 true 时,横向拉长文本框时,里面的文字不会变形。 但文本框的最小宽度取决于里面最长一行的文本宽度。 代码仓库 ⭐文本自动换行

8.3K40

动态海报营销FabricJs方案

简介 Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.jsCanvas提供所缺少的对象模型, svg parser, 交互一整套其他不可或缺的工具。...Fabric.js可以做很多事情,如下: 在Canvas上创建、填充图形(包括图片、文字、规则图形复杂路径组成图形)。 给图形填充渐变颜色。 组合图形(包括组合图形、图形文字、图片等)。...// 读取图片地址,设置画布背景 fabric.Image.fromURL('xx/xx/bg.jpg', (img) => { img.set({ // 通过scale来设置图片大小,这里设置画布一样大...: 0.85, // 图片透明度 // 这里可以通过scaleXscaleY来设置图片绘制后的大小,这里原来大小的一半 scaleX: 0.5, scaleY: 0.5 }); //...quality: 0.8 // 图片质量,仅jpeg时可用 // 截取指定位置大小 //left: 100, //top: 100, //width: 200, //height

3.4K21

Fabric.js 右键菜单

本文主要关注 Fabric.js 的主要 api 有: fireRightClick:允许右键点击 stopContextMenu:禁用默认右键菜单 mouse:down:鼠标点击事件 如果不知道 Fabric.js...案例代码放了在文末~ 环境版本 Chrome浏览器版本:96.0.4664.45 Fabric.js版本:4.6.0 思路 先说说需求: 右键单击元素,弹出菜单; 弹出菜单分4种情况(菜单在鼠标右侧...:down 事件里有个 button 属性: 左键:button 的值 1 右键:button 的值 3 中键(也就是点击滚轮),button 的值 2,前提需要设置 fireMiddleClick...初始化画布,并生成图形 // 文档加载后执行 window.onload = function() { // 输出当前 fabric 版本 console.log(`Facrib.js...({ width: 80, // 底边宽度 height: 100, // 底边到定点的距离 fill: 'blue', left: 500, top: 480

7K10

Fabric.js 禁止元素超出画布

元素的坐标画布的坐标,都是以左上角原点。所以【情况1】只需考虑元素的 xy坐标 有没有超过画布的左边上边。...【情况2】是用元素右边下边跟画布做比较,而元素的原点是在元素的左上角,所以元素的右边是 元素原点x坐标 + 元素的宽度 ,元素的下边是 元素原点y坐标 + 元素的高度 。...【公式2】超出画布上边:图形左上方y坐标 画布右下方x坐标,图形的 left 设置画布右下方x坐标 - 图形宽度 【公式4】超出画布下边:图形左上方y坐标 + 图形高度 > 画布右下方...y坐标,图形的 top 设置画布右下方y坐标 - 图形高度 动手编码 公式有了,接下来就思考一下触发公式的时机。

4.1K30

使用Vue + fabric.js构建标注工具的细节

上篇文章大致介绍了使用Vue + fabric.js构建标注工具的流程,本篇则将其中的一些细节以及fabric的踩坑进行补充1.鼠标从右向左画框承接上篇的描述,使用fabric在canvas上画标注框的流程主要为...,鼠标移动时的坐标右下角(mouseTo)的矩形(rect);监听画布的鼠标抬起mouse:up事件,鼠标抬起时,标注框绘制完毕;由此得知,在第二步中的标注框的生成代码rect = new fabric.Rect...object:moving', (e) => {// 阻止对象移动到画布外面 let padding = 0; // 内容距离画布的空白宽度,主动设置 var obj = e.target...,果然是125%,与上面所述打印出来的rect的zoomXzoomY对应,试着分辨率改成100%,发现zoomXzoomY值变为1,选中状态下的控制点也显示正常了理清bug出现的原因后,自然而然就想到...bug就迎刃而解了5.图片分辨率不同,标注框的宽度设置由于不同的图片分辨率差异较大,如果以同一种宽度设置标注框,呈现效果相差较大,因此采取根据图片分辨率来动态设置标注框宽度(scale上篇文章中创建画布阶段

2.7K81
领券