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

jimojianghu

以前,如果要禁止移动端设备的触摸屏,手指缩小放大的功能,都会想到使用viewport 来处理。...用于设置触摸屏用户如何操纵元素的区域,允许你时控制滚动操作。 例如,浏览器内置的缩放功能。 这样做的好处还有,它可以允许你自己实现这些手势。...pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation; touch-action 属性值 auto 当事件发生在元素时...none 当事件发生在元素时,不进行任何操作。 pan-x 启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和/或 pinch-zoom 组合使用。...once: Boolean,表示 listener 添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除

3.8K00

viewGroup与view对事件的处理

这里我们再来小结一下: 一个MotionEvent对象内部使用一个数组来维护所有点的信息 UP/DOWN类型的事件包含了点索引,可以根据该索引做出对应的操作 点的索引是变化的,不能作为跟踪的依据...TouchTarget有个非常神奇的设计,他只使用一个整型变量来记录所有的id。整型变量中哪一个二进制位为1,则对应绑定该id的点。...除了默认情况,我们也可以进行自定义列表顺序,这里就不展开了。 viewGroup会按顺序遍历整个列表,判断点的位置是否该view的范围内、该view是否可以点击等,寻找合适的子view。...= 0) { // 使用点索引获取点位置 final float x = ev.getX(actionIndex)...按键模式对应的是外接键盘或者以前的老式键盘机,在按键模式下我们要点击一个按钮通常都是先使用方向光标选中一个button(也就是让该button获取到focus),然后再点击确认按下一个button。

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

    开发者必备的12个JavaScript库

    2) Hammer.js Hammer.js是一个轻量级的JavaScript库(压缩后仅有3kb),能让你的网站轻松实现事件。它依赖于jQuery,用来控制触摸设备的多点特性。 ?...Math.js 很强大又易于使用。...8) Morris.js Morris.js 是一个轻量级的 JS 库,使用 jQuery 和 Raphaël 来生成各种时序图。 ?...在线演示 主要特性: 完全自定义,包括颜色,旋转等等 在任何位置显示设定的颜色和大小的动画“ping” 支持鼠标拖动和缩放 通过基于插件的架构可以扩展 ?...12) Turnjs Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备。 Turn.js 支持硬件加速来让翻页效果更加平滑。

    2.7K90

    JS中的touch事件与canvas绘图

    :手指从屏幕中移开的时候触发 touchcancel:当系统停止跟踪触摸时触发(例如:创建了太多的点) 例如 this.canvas.addEventListener("touchstart", this...哪怕触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除....因此, 如果有元素触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素侦测到从该元素冒泡的事件....,鼠标抬起或者屏离开时重新进行全屏绘制,但是会突然一变,最后还是决定在光标移动中就不停的全部quadraticCurveTo绘制,这样也没有明显的慢,就决定用后来的这种方式了。...devicePixelRatio属性示例 一个 canvas 视网膜屏幕可能显得太模糊。

    7.5K41

    微软何时不再“阳萎” 看Nadella上任一年后憋了哪些大招

    UWP平台的App还可以通吃桌面环境、Xbox、IoT设备、Surface Hub大型屏幕。...新策略2:单一OS通吃所有大小设备 不只手机、平板、笔记本电脑、PC能用,小至穿戴式设备和IoT设备,大到84寸Surface Hub屏幕都是同一套OS。...不只手机、平板、笔记本电脑、PC都能支持,Windows 10还能支持小至穿戴式设备和IoT设备,大到84寸Surface Hub超大屏幕,连Xbox One游戏机未来也都将内建Windows 10...单一Windows 10操作系统通吃大小设备之后,更进一步地,新推出了一个Continuum模式,来串接人们设备间切换工作的流程,也是一个用来切换键盘、鼠标和屏幕操作的方式。...因为软件仍是在手机上执行,所以,使用者也可以直接在手机屏幕,用手指代替鼠标来操作Outlook,大屏幕的Outlook也会同步显示光标移动的情况。

    1.8K50

    是时候为各式设备适配完善的输入支持了

    随着技术进步以及跨平台应用的普及,您的 Android 应用已经不再局限于直板设备运行了。更丰富的交互方式使得用户能够以更复杂的输入方式使用您的应用。...的一个常见范例是屏幕长按以执行基于上下文的操作,但长按鼠标点击并不直观。如果要支持右键点击,此处有几种方案可供选择。...应用能够通过指针捕获功能捕获鼠标光标,使光标不出现在屏幕,这样无需将光标移动到屏幕边缘就可以接收相对的指针事件。像 Minecraft: 教育版等第一人称视角游戏就是很好的案例。...我们非常兴奋,支持的 PC ,Android 模拟器现在也可以支持多点,这让您可以测试需要使用多个手指的手势与应用进行交互,比如双指张合、缩放和其他触摸交互。...Microsoft 也一直利用这些模拟器更新来开发和优化自己的应用,例如在包括 Surface Duo、大屏幕和其他可折叠设备等多种设备类型测试触控笔的交互。

    1.1K20

    高效开发软件——VSCode

    Option + Shift + A 添加、移除块注释 Option + Z 自动换行、取消自动换行 Option + 点击 插入多个光标 Command + Option + Up/Down 向上/...下插入光标 Command + U 撤销上一个光标操作 Option + Shift + I 在所选行的行尾插入光标 Command + I 选中当前行 Command + Shift + L 选中所有与当前选中内容相同部分...4)Bracket Pair Colorizer:给括号加上不同的颜色,便于区分不同的区块,使用者 可以定义不同括号类型和不同颜色 5)Debugger for Chrome:映射vscode的断点到...chrome,方便调试 6)ESLint:js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广 泛使用的eslint配置 7)GitLens:方便查看git日志,git重度使用者必备 8...html,而该插件支 持快捷键与鼠标右键快速浏览器中打开html文件,支持自定义打开指定的浏览器, 包括:Firefox,Chrome,Opera,IE以及Safari 15)Path Intellisense

    1.1K20

    Cloud Studio 年度产品亮点回顾

    在产品我们坚持极简的部署产品交互,但背后它却可以智能适配数十款的前端建站项目。开发完, Cloud Studio 预置的页面中看到开发效果后,一键即可完成线上部署。...Cloud Studio 协作套件推出代码协作,支持多光标写代码,同时还支持光标跟随、滚轮跟随,非常适合上课模式和代码投屏;我们还支持终端多光标跟随,解决尺寸不同导致的乱码问题,我们还支持留言板,圈点代码讨论...视频内容我们非常重视和开发者的反馈意见,并积极主动推动实现落地;我们陆续支持了:IPad 最新版本 + 妙键盘的开发流畅性通过对产品的前端优化,提升 iPad 操作 Cloud Studio 界面的体验...视频内容增加了多款主流框架和示例库越来越多的前端开发者都在使用符合 JamStack 类型的框架。我们控制台内置了多款主流的建站框架、前端框架、后端框架及对应的示例库。可以非常方便一键打开运行效果。...邀请、移除、管理团队成员。创建、删除、使用团队自定义模板。  Cloud Studio 团队版 | Cloud Studio写在最后2022 年是个很艰难的一年,我们砥砺前行。

    51620

    你无法检测到触摸屏

    但问题是,从来没有人说过一个非设备不能实现触摸接口,或者至少 DOM 里拥有事件句柄。...Chrome 24.0 装载支持了所有这些接口,所以它们可以开始支持触摸屏而不需要分为“屏”和“非屏”来构建。但是大量开发者依然使用上面例子中的检测方法,所以这损坏了大量网站。...到目前为止我只 Windows 8 里看到这种情况,但从理论讲,它可以发生在任何操作系统。 一些 BlackBerry OS 的版本也已被知道非触摸设备持久启用了触摸的接口。...如果你特希望屏检测在这些设备不会过时,千万别假定在监测屏幕时只需做好空间布局就够了。 事件和交互 ¶ 所以你想要为你的幻灯效果和地图窗口部件设置滑动手势吗?这很酷。...悬停状态的处理 ¶ 当前的触摸屏并不能传输鼠标/光标悬浮状态, 所以,最好调整我们对于触摸屏的UI设计,以便在触摸屏能够继续使用。 当然,键盘也是不能悬停的。

    1.9K20

    WEB前端工具推荐丨分享6个热门颜色选择器组件

    对于前端开发初学者而言,颜色选择器可能比较陌生,甚至实际项目中都未曾使用过。...但如果开发高端一点的网站的话,通常需要自定义主题功能,可以自定义导航栏、菜单栏的文本颜色、背景色之类的,此时就用到颜色选择器了。 今天为大家推荐几个 Github 热门的颜色选择器组件。...一、Colorjoe colorjoe 是一个具有和 AMD 支持的可扩展颜色选择器。可以通过 CSS 定义其实际尺寸和布局。通过这种方式,该组件非常适合响应式布局。...还支持和 AMD 模块定义。 colorjoe 受到 ColorJack 和 RightJS Colorpicker 的启发。与那些不同的是,它实际可以很好地扩展。...不仅如此,还可以使用不同的组件来创建自定义颜色选择器。

    2.1K20

    京东金融客户端用户达方式的精细化探索与实践

    ,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕 从用户使用角度来看,用户使用App的过程中会有一些与用户相关的系统类的通知,比如交易物流...④解决机型兼容性适配问题 实践过程中还发现各厂商的不同型号的设备存在无法跳转到落地页的情况,经分析该机型应用安装后系统请求解析配置表assetlinks过程失败,此时会使用系统默认浏览器打开落地页...各厂商push方案的实现大体相同(厂商push接入流程,下图以MiPush为例),使用厂商推送的过程中作者也遇到了很多问题,因此了解了各厂商的特性是制定出良好的达策略前提。...随着Android系统使用体验的不断升级,通知开关的管越来越严格,一些系统APP安装后默认情况下仅弹窗提醒一次,也有一些系统默认情况下通知开关为关闭装态。...以上 3.遇到的问题及解决思路 ①如何让横栏实现在App站内全局 全局弹窗这个实现起来相对容易,主要依赖注册的页面生命周期监听,利用WindowManager离开页面时移除view ,进入新页面重新添加

    6.2K50

    如何用Sonic云真机打王者

    ,前端将键盘 wasd 按键关联到摇杆坐标就可以了,当然是自定义区域与按键的多点指令d 0 10 10 50cd 1 20 20 50cu 0cu 1c过去,我们调试设备 webview 确实麻烦,...1、远程的设备怎么办?并不能连接到我的 inspect 页面2、webview 调试工具首次使用需要能访问 developer.chrome 官网(搭梯子),不然调试页面会报 404,这无疑是个门槛。...获得的反馈基本是iOS的投屏清晰度高,FPS能达到30,但是延迟也比较高这是因为跟安卓原理不一致。...但是安卓的经过调用API的方式,实时监听鼠标移动轨迹来发送指令给手机,所以体验会更佳、更流畅。但是iOS的话,这种方式webdriveragent里面很不好实现,目前也探索之中。...Sonic:我全都要在不久的版本中,很快迎来scrcpy与minicap都可以使用,将选择权交给了用户,用户对自己的设备性能、兼容性等等自己选择投屏方案,并且远程音频传输方案已经本地开启分支,相信很快也面世

    1.7K20

    微软 ZoomIt 屏幕放大和注释工具--教学演示神器

    还可以使用 ZoomIt 将屏幕截图截取到剪贴板或文件。ZoomIt 系统托盘中不显眼地运行,可使用自定义的热键激活,它能够放大屏幕区域,缩放时四处移动,并在缩放后的图像上进行绘制。...我编写了 ZoomIt 以满足我的具体需求,并在我的所有演示中使用它。 ZoomIt 适用于所有版本的 Windows,你可以平板电脑使用和笔输入进行 ZoomIt 绘图。...ZoomIt 的行为,让我们指定用于缩放和在不缩放的情况下进入绘图模式的备用热键,并自定义绘图笔的颜色和大小。...例如,我使用“无缩放绘图”选项以本机分辨率屏幕注释。ZoomIt 还包括一个中断计时器功能,即使在你离开计时器窗口时也保持活动状态,并使你能够通过单击 ZoomIt 托盘图标返回到计时器窗口。...Ctrl + 2 增加/减少线条和光标大小(绘图模式) Ctrl + 鼠标向上/向下滚动或箭头键 将光标居中(绘图模式) 空格键 白板(绘图模式) W Blackboard(绘图模式) K 键入文本(左对齐

    47040

    Termius for Mac(SSH客户端)中文

    Termius是一款支持SSH、Telnet和SFTP的跨平台终端工具,可在Windows、macOS、Linux和移动设备运行。...特别是针对Mac平台,Termius提供了本地终端模拟器、栏快捷操作、Touch Bar支持以及iTerm主题兼容性等。此外,它还可以与浏览器插件结合使用,方便用户直接从网页中打开SSH连接。...分屏:支持同一个窗口中分割多个SSH会话窗口,使用户可以同时查看和操作多个终端。...云同步:Termius可以将SSH连接信息和设置同步到云端,使得用户可以不同设备之间共享SSH连接。...栏快捷操作:Mac平台上的Termius支持栏快捷操作,用户可以通过栏快速切换标签页、复制、粘贴等。

    9.6K20

    android的详解

    通过使用元素,一个应用可以指定它所支持的硬件型号,举个例子,有些设备不支持多点或者OpenGL ES 2.0,那么过滤器就会过滤需要这些硬件支持(多点或者OpenGL...android.hardware.touchscreen.multitouch:它要求设备有一个多点的屏幕以支持基本的多点交互,就如收缩(放大)图像比例。...现在只要记住在当你的游戏需要一个支持多点的屏幕的时候,我们可以使用 元素来剔除所有不支持多点设备,就像下面这样: <uses-feature android:name...注意,本书中不会使用OPenGL ES 2.0, 我们只是过滤那些不能提供足够图形处理能力的设备。下面显示了我们怎么去实现它。...举个例子,如果你的游戏需要有多点的支持,但是我们也可以思考另外一种方法,是游戏能够支持单点设备运行良好,我们就可以写2个路径的代码,分别在两种设备运行。

    1.4K100

    无法在此iPhone激活Touch ID,怎么解决?

    一、常见的修复方法 如果你无法使用Touch ID解锁iOS设备,或者你无法在此iPhone激活ID,请按照以下步骤快速修复: 1....确保你的手指和 iPhone 的主页按钮干净、干燥。 3. 当你尝试激活Touch ID时,请确保你的手指覆盖了整个主页按钮。ID 扫描时,不要太快点击或移动手指。 4....设备识别后,iTunes面板,点击“恢复iPhone”。 3. 然后再次点击“恢复”进行确认。...iTunes恢复.jpg 五、使用第三方工具修复iOS系统 最后,如果你仍然无法在此iPhone激活ID,我们建议你使用专业工具修复iOS系统。...fix-now.jpg 如果你无法iPhone使用或激活ID,请找出导致问题的原因。如果是与软件相关的问题,可以尝试本文中介绍的几种解决办法。

    5.6K20

    11-移动端开发教程-zepto.js入门教程

    Zepto.js下载 代码下载:zeptojs中文站 、 github 2.1 自定义Zepto.js文件模块 zepto默认是有五个模块的,分别为zepto、event、ajax、form、ie,这五个模块被称为核心模块...browser消息 fx The animate()方法 fx_methods 以动画形式的 show, hide, toggle, 和 fade*()方法. assets 实验性支持从DOM中移除...touch 触摸设备触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。...gesture 触摸设备触发 pinch 手势事件。...总结 zepto.js确实非常小巧,而且非常讨巧的利用了大家熟悉jQuery的优势,确实非常可爱的一个js库,设计的模块中庸而又实用,移动端的屏事件封装的很不错,移动端web开发值得推荐。

    2.3K50

    属于VR输入方式的“后浪”在哪里?

    回归到电子产品,信息的输入输出方式往往决定了该产品是否能够获得市场。探讨VR设备输入方式前,P君以智能手机为例,简单地带大家回顾一下记录人机交互史上的那一道道精彩的印记。...手机:从点按到 众所周知,我们现在使用的“QWERTY”键盘最早来自于打字机,为了防止打字速度过快导致的卡键问题,才有了现在这样的字母排列方式。然而键盘+显示器的输入输出设备早已出现。...直到1983年,摩托罗拉才生产出了世界最早的一款移动电话DynaTAC。这部初代大哥大率先使用了九宫格拨号键盘,这样的机身设计直接影响了后世所有手机。 ?...1999年,摩托罗拉推出的第一款智能手机A6188采取了触摸屏技术,从最早的电阻式到沿用至今的电容式,这一机型的出现,彻底改变了大家对手机操作的观念,更重要的意义是其培养了新的用户输入习惯。...很多VR头显都自带虚拟键盘,其使用方法正如普通键盘那般,只不过将敲打键盘的双手,换成了光标锁定。这种方式虽满足了用户输入的需求,但玩家需要一个字母一个字母的点按,操作复杂且十分耗时。

    1.1K20

    NPlayer 支持移动、平板、桌面,高度可定制的弹幕视频播放器

    你可以自定义所有图标、主题色和每个控制项的位置,并且提供了内置组件方便二次开发。你可以自定义任意多个断点,不仅仅是兼容移动端,只要愿意,你可以非常轻松的兼容手机竖屏、手机横屏、平板等设备。...NPlayer 支持上面提到的两套交互,可以通过 isTouch 参数来设置播放器是使用哪一套交互,默认情况下会在播放器初始化时自动检测是否是屏,如果是将使用屏交互逻辑否则使用键鼠交互。...使用上面提到的自定义断点,我们可以非常轻松的实现 Mini 播放器功能。...要使用 NPlayer 播放流媒体需要引入相关类库。比如,播放 HLS 可以引入 hls.js、 shaka hls等相关库,播放 DASH 可以引入 dashjs。...Vue 和 React 使用,NPlayer 也提供了相关的组件。

    3.6K30

    Macbook Pro 2017 13-inch

    然后,考虑如何根据应用的使用方式公开不同级别的功能。 将栏用作键盘和触控板的扩展,而不是显示器。虽然 Touch Bar 是一个屏幕,但它的主要功能是用作输入设备,而不是辅助显示器。...如果可能,旨在设计类似于物理键盘中按键的大小和颜色的栏控件。 避免仅在栏中提供功能。并非所有设备都有栏,如果他们愿意,人们可以禁用栏中的应用程序控件。...始终为人们提供使用键盘或触控板执行任务的方法。 全屏环境中,考虑栏中显示相关控件。全屏模式下,应用程序通常会隐藏屏幕控件并仅在人们通过例如将指针移动到屏幕顶部来调用它们时才显示它们。...准确反映出现在栏和主屏幕的控件状态。例如,如果一个按钮主屏幕不可用,则它不应该在栏中可用。 响应用户交互时,避免 Touch Bar 和主屏幕中显示相同的 UI。...例如,当人们邮件的新消息窗口中单击屏幕的表情符号和符号按钮时,他们希望字符查看器主屏幕打开,而不是栏中打开。

    1.1K40
    领券