web端如何获取笔压 web端获取笔压的js库

web端为什么要获取笔压

这是我一直以来的一个疑问,在web端可以获得笔压么,比如一个如果开发一个web端的画板,使用canvas制作,假如客户端所用的设备是一个手绘板,能够获取笔压的话肯定可以让其效果更好。事实上我在之前找了好久都没有找到过已经成熟的解决方案,直到一天我找到了pressure.js

什么是pressure.js

pressure.js是一个用于处理Force Touch, 3D Touch(前面两个人都是苹果的技术)和压感的前端js库,封装了一些简单的api用于处理压感事件
pressure.js 官网:https://pressurejs.com/
github页面 写文章为止2533个星星
前提是浏览器与设备需要支持,否则效果会退回。

目前的情况

我自己插上自己的wacom数位板,使用谷歌最新版的浏览器,好像是会被检测到,而且可以获取笔压。不知道用苹果的mac的会不会有用,有用的话欢迎评论。

原生的api

原生的api都是在pointer下面(但是只有比较新的浏览器才能支持哦)。
想要查看pointerevent 的api请看
如果想要查看一个canvas 支持笔压的手绘demo请看 这支持笔压的画布demo
在这里插入图片描述

角角兔 towrabbit
我是角角兔,喵喵喵。

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一种用于构建用户界面的 JavaScript 框架,它提供了一种基于组件的开发模式,可用于构建单页面应用程序。在 Vue.js 中实现 Web 的定位功能获取经纬度可以通过使用 HTML5 的 Geolocation API 来实现。 Geolocation API 是一种 HTML5 标准,允许 Web 应用程序使用 JavaScript 与浏览器通信并访问用户的地理位置信息。在 Vue.js 中,您可以使用 Geolocation API 获取用户的地理位置数据,并使用 Vue.js 的组件和生命周期方法来处理数据和更新 UI。以下是实现步骤: 首先,在您的 Vue.js 应用程序中,您需要创建一个组件来获取用户的位置。在这个组件中,您可以通过调用浏览器的 Geolocation API 来获取用户的位置信息。 ``` <template> <div> <button @click="getLocation">获取位置信息</button> <div v-if="lontitude && latitude"> 经度: {{longitude}} 纬度: {{latitude}} </div> </div> </template> <script> export default { data() { return { longitude: null, latitude: null } }, methods: { getLocation() { navigator.geolocation.getCurrentPosition(position => { this.longitude = position.coords.longitude this.latitude = position.coords.latitude }) } } } </script> ``` 这个组件包含一个按钮,当用户单击该按钮时将调用 getLocation 方法。该方法将调用 Geolocation API 中的 getCurrentPosition 方法,这将向用户请求权限以访问其位置信息。如果用户同意,浏览器将获取用户的位置信息,并将其保存在该组件的 data 对象中。 现在,我们已经获取到了用户的位置信息。您可以使用这些信息来更新 UI 并执行其他操作。例如,您可以使用这些信息来显示地图或定向用户的位置。 综上所述,Vue.js 使用 Geolocation API 可以轻松获取用户的当前位置信息,并可使用 Vue.js 的组件和生命周期方法进一步处理信息和更新 UI。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值