首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS 实现放大缩小拖拽采坑之旅

本文首发于政采云前端团队博客:纯 JS 实现放大缩小拖拽采坑之旅 https://www.zoo.team/article/scaling ?...前言 最近团队需要做一个智能客服悬浮窗功能,需要支持拖动、放大缩小等功能,因为这个是全局插件,为了兼容性考虑全部使用原生 JS 实现,不引用任何第三方库或者插件。...三个坑点 拖拽采宝时会导致采宝放大缩小 采宝显示在屏幕边界时被遮挡显示不全 采宝放大和缩小后,位置发生变化 (一)拖拽时会导致采宝放大缩小 我们在操作采宝时,不管是鼠标拖动还是点击放大缩小,我们的事件都需要绑定在采宝头部的图标上...这样就会出现在拖动采宝的时候,采宝会放大和缩小。 ?...'放大缩小' (三)采宝放大和缩小后,位置发生变化 通过上图,我们可以看到,当小采宝处在显示屏边界时,点击放大后再点击缩小,我们发现采宝的位置发生了变化。

5.7K10

Fabric.js 使用自定义字体

这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。...学习本文前,你必须有一点 Fabric.js 的基础,如果没了解过 Fabric.js 可以阅读一下 《Fabric.js 从入门到膨胀》 创建文本时设置字体 在 Fabric.js 中使用自定义字体库时...在创建文本时就设置字体,需要做以下几步: 在 CSS 里引入字体。 使用 Fabric.js 创建画布。 等字体加载完成后再设置文本字体。 将文本添加到画布中。...创建画布渲染文本的速度可能会比加载字体资源快很多,所以需要用到 fontfaceobserver.js 去监听字体加载结果。...⭐ Fabric.js 使用自定义字体

45020

JS 获取浏览器默认字体大小

说是 JS,其实也还是要配合 CSS 使用。 要获取浏览器默认字体大小,我们可以使用 CSS 的 font-size 属性。...将元素的字体大小设置为 medium 可以将其设为浏览器默认大小,通常为16 px。...以下是设置元素字体大小的 CSS 代码示例: .element { font-size: medium; } 一旦将元素字体大小设置为浏览器默认大小,就可以通过 JavaScript 来获取其实际值...下面的代码演示了如何使用 JavaScript 获取浏览器默认字体大小: const measureElement = document.querySelector('.element'); let fontSize...最后,使用 parseInt() 方法将获取到的字体大小值转换为整数。 需要注意的是,如果浏览器默认字体大小被修改,例如在 Chromium 浏览器中将其更改为"特大",则返回值将相应地更改。

3K30
领券