- 博客(88)
- 收藏
- 关注
RSS订阅原创 fabric 加载png ，报错Uncaught DOMException: Failed to execute ‘getImageData‘ on ‘CanvasRenderingContex
在 Fabric.js 中加载 PNG 图像时，如果遇到 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data 错误，通常是因为加载的图像来自不同的源（跨域），而浏览器默认会阻止跨域图像操作。同时，在图像加载回调中也设置了 `crossOrigin` 属性。这样可以允许所有域名访问图像资源。
2024-07-02 16:55:30
246
原创 fabric.util.enlivenObjects是什么意思
fabric.util.enlivenObjects是处理从JSON数据恢复Fabric对象的关键工具，特别是在实现如撤销/重做功能或从外部源加载画布状态时非常有用。它帮助确保数据可以被转换回可交互的Fabric对象，从而维持应用的功能性和用户体验。
2024-06-11 15:47:59
357
原创 js判定-矩形内是否包含指定点
场景：使用JavaScript计算，一个由四个点(x1，y1)，(x2，y2)，(x3，y3)，(x4，y4）逆时针顺序组成的矩形可以旋转。给定一个点(x，y)，判断该点是否在矩形内。要确定一个点(x，y)是否在由四个点组成的矩形内，可以使用称为“叉积法”。该方法包括计算矩形的点和点(x，y)形成的向量的叉积。如果所有的叉积都有相同的符号，则该点在矩形内。该函数将点(x，y)的坐标和矩形(x1，y1)(x2，y2)，(x3，y3)，(x4，y4)四个点的坐标作为输入参数。
2024-04-30 13:47:17
242
1
原创 fabricjs控制背景图和画布图片展示
1.检查画布是否存在背景在Fabric.js中，可以通过检查canvas.backgroundImage属性来判断画布是否设置了背景图片。如果canvas.backgroundImage不为null或undefined，则表示画布上设置了背景图片。2.存在，清除画布背景3.不存在，添加画布背景我用的是js方式引入图片4.控制背景图展示的完整代码。
2024-04-16 15:51:17
569
原创 vue项目中，修改fabric默认操作
场景：fabricjs绘制的元素，默认点击鼠标左键即可自由移动元素。需要把操作改为，点击鼠标左键先选中元素，只有选中的元素，按住鼠标左键后才能移动。evented: false // 设置对象为不可触发事件，防止直接移动。selectable: true, // 设置对象为可选中。原理，通过修改参数，实现。
2024-04-15 15:20:32
387
转载 【汇总笔记】axios的四种请求方式及参数设置
url (string): 请求的 URL 地址。data (any): 请求的数据。params (object): 请求的查询参数对象。headers (object): 请求头对象。timeout (number): 请求超时时间。withCredentials (boolean): 是否携带跨域请求的凭证。cancelToken (CancelToken): 用于取消请求的 CancelToken 对象。responseType (string): 响应数据的类型。
2024-02-21 15:12:50
5006
原创 vue大文件读取部分内容，避免重复加载大文件，造成流量浪费
使用Axios发出一个HTTP GET请求来获取.pcd文件的前2048字节，该文件通常包含头文件。然后解析报头以提取版本信息。但是，请注意，头的具体大小可能因.pcd文件格式而异，可能需要相应地调整字节范围。避免重复加载整个“.pcd'文件，以最大限度地减少网络流量。实现这一点的一种方法是只获取”.pcd'文件部分内容，该文件通常包含包括版本信息的元数据。项目点云地图是pcd文件，但是文件可能上百兆，我需要获取到文件中的版本信息，跟本地的缓存文件做比较，如果不一致，才会加载整个文件。
2024-02-21 14:33:27
314
原创 vue项目中下载静态资源里的pdf文件
1.把文件放在项目目录src/assets文件下。3.需要在vue.config.js中配置！2.在项目是用a标签下载。
2024-02-19 10:58:39
984
原创 elementui 回到顶部报错
组件的伙伴们，把官网代码复制到页面使用时会遇到问题：element 解决 Error: target is not existed: .page-component__scroll .el-scrollbar__wrap。
2024-02-01 16:50:12
487
原创 indexeddb使用场景
离线Web应用程序：IndexedDB允许Web应用程序在浏览器中存储和检索数据，即便是在没有网络连接的情况下，用户仍然能够访问本地保存的信息。电子商务网站：对于需要本地存储购物车和订单历史记录的电子商务网站，IndexedDB可以高效地存储和管理这些数据，提升用户体验。数据可视化工具：IndexedDB还能用于数据可视化工具，允许用户在离线状态下处理数据，并在下次连接时将数据同步回云数据库。综上所述，IndexedDB广泛应用于不同类型的Web应用程序和服务，为用户提供流畅且灵活的用户体验。
2024-01-31 17:43:14
354
原创 css样式：抄的背景渐变样式
最近入坑 爱奇艺的《一念关山》（谁让咱也没有别家视频会员）。顺手就抄了他们家一个背景渐变样式。分析：运用了渐变，挺适合用在深色背景场景中，如 数据可视化大屏展示等。展示：（就是右侧 切换的选中样式）
2023-12-13 16:16:18
116
原创 记录一个巧思，foreach后面执行内容
遇到一个场景，foreach来遍历数组中内容，执行函数，最后需要对函数执行成功个数进行统计，统一输出。放在循环的函数内部，但是对index进行判定。如果时循环的最后一个，进行操作。关键：index+1 和 数组长度一致，判定是最后一个。每一次for循环函数内部 参数++问题：输出时 没有显示正确的个数。过程：同步异步处理...
2023-12-08 04:00:00
94
原创 记录一个mqtt错误
就表示不理解，网上也没查到相应的资料，请告诉我我不是第一个遇到的人...在vue-admin-template。中引入mqtt 安装不报错，引入试过。
2023-11-27 15:37:38
127
2
原创 新手引导功能，Intro.js 和driver.js 比较
Intro.js 和 driver.js 都是用于创建前端新手引导的工具，它们都有各自的优点和适用场景。具体选择哪个工具，应该根据项目需求和团队习惯来决定。
2023-11-23 11:15:40
500
原创 上传本地pcd文件，并用threejs渲染
用FileReader来直接获取到文件二进制形式的内容，进行threejs的渲染，但是会报数据格式问题，无法渲染。分析了下pcdloader源码，其中对无效数据进行了处理。pcd文件很大，如果是本地的文件，上传到网络再下载下来，会造成网络流量的极大浪费。那么我直接加载本地的（当前计算机上的pcd文件）用来显示，会大大提高网络效率。2）用pcd加载器PCDLoader，渲染pcd文件。1）用input上传文件，生成新路径。
2023-11-07 14:28:04
352
原创 iis 设置pcd文件的 MIME 类型，如何设置
现在，当您的网站收到请求PCD文件时，IIS将返回正确的MIME类型（application/octet-stream），以便浏览器正确处理文件。请注意，PCD文件通常由一些特定的图形处理软件（例如Three.js）使用，因此确保您的客户端代码也正确配置以处理该MIME类型的响应。在IIS管理器左侧面板中，展开"网站"，然后选择您要设置MIME类型的网站。在右侧的"网站"窗格中，展开"MIME类型"节点，然后选择"添加"按钮。打开IIS管理器（可以在开始菜单中搜索IIS来找到）。点击"确定"按钮保存更改。
2023-11-03 14:44:09
108
原创 js 鼠标事件各个参数示意
鼠标指针在视口中的坐标（不包括任何滚动偏移）。：被按下的鼠标按钮。1 左键 2滚轮 3右键。：表示按下哪些鼠标按钮的位掩码。：是否按下了相应的键盘按键。：鼠标指针在屏幕中的坐标。
2023-09-26 13:39:25
778
原创 js 已知起始点，和两个控制点，求贝塞尔曲线长度
bezierLength’是一个函数，它有8个参数，分别代表起始点 (x0，y0)，第一个控制点 (x1，y1)，第二个控制点 (X2，y2) 和结束点 (x3，y3)的坐标。要求贝塞尔曲线的长度，需要使用数值积分。然而，对于一般的贝塞尔曲线，没有封闭形式的长度表达式，因此需要使用数值方法进行近似计算。该函数将Bezier曲线划分为“STEP”段(您可以或多或少地精确地调整STEP的值)。将所有小段的长度加起来，得到贝塞尔曲线的总长度。计算每一段的长度，并将其累加，得出曲线的总长度。
2023-09-22 09:50:38
338
原创 fabic.js Quadratic Curve /可控制的曲线
需要绘制一条可控制的贝塞尔曲线，发现fabic官网中一个demo有点类似。感兴趣的可以移步官网查看。核心：定义 line时，设置path数组值。变换时修改path数组中的值。但是我需要绘制三阶贝塞尔曲线，即要两个控制点。这时候就需要变形一下。修改直接进行重新赋值。
2023-09-20 15:37:00
493
原创 元素居中展示
原理：left 控制元素到外层元素的左侧距离，50%代表中间，translateX(-50%)元素再向左移动自身的50%。有个position: absolute;定位的元素，宽度不一定，高度不一定，但是需要。用left 和transform结合。想到一个很绝的方法。
2023-09-20 10:33:43
62
原创 fabic.js Stickman应用》》元素关联设置/拓扑图
分析：最核心代码为set({ 'x2': p.left, 'y2': p.top })，通过为canvas添加元素移动判定canvas.on('object:moving'，根据移动重新设定线段的绘制坐标。在canvas画布上绘制多个圆形，并添加连接线，图形移动，线自动跟随移动。查看fabic文档，Stickman火柴人demo完美适应。变形使用：（仅为逻辑，请自行编写判定逻辑）
2023-09-19 14:58:40
143
2
原创 fabic绘制元素并添加到最底层
在上面的示例中，我们首先创建一个名为 "myCanvas" 的画布，并创建了一个矩形元素。要将 fabic中的元素添加到最底层，您可以使用。方法将矩形元素添加到画布中。方法将矩形元素发送到最底层。
2023-09-14 15:15:14
300
原创 fabic如何将绘图原点移到画布中心
不得吐槽一句，他母亲canvas这点就很有好呢，用 transform 一行代码即可实现--ctx.translate(canvasWidth / 2, canvasHeight / 2)。后端给我的内容是按照x，y返回的，需要将坐标系移到fabic画布的中心位置，找了下网上合适的砖，想一句命令直接设置，结果没有。即为：left=canvas.width/2 +x ,top=canvas.height/2-y。后端给出的（x,y）坐标，我可以根据（canvas.width/2。言归正传，咱绘制一下坐标系。
2023-09-13 11:42:15
671
原创 fabirc 将图像绘制原点定为图形内部
recti1 未设置originX: 'center',originY: 'center'，left和top为绘制图形起始点；recti1设置originX: 'center',originY: 'center',left和top为绘制图形中心原点。
2023-09-13 10:40:54
87
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人