开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
基础 api
基础
应用级事件
界面
导航栏
tabbar
路由
交互反馈
下拉刷新
联系人
选择城市
选择日期
动画
画布
canvas
canvasrenderingcontext2d
canvaspattern
offscreencanvas
旧版接口(停止更新)
地图
计算路径
键盘
滚动
节点查询
选项选择器
级联选择
设置窗口背景
设置页面是否支持下拉
字体
跳转
多媒体
缓存
文件
位置
网络
设备
worker
数据安全
分享
收藏
自定义通用菜单
更新管理
web-view组件控制
升级支付宝最新版本
隐私信息授权
小程序广告
开放能力 api
开发 > api > 基础 api > 界面 > 画布 > canvasrenderingcontext2d > canvasrenderingcontext2d.ispointinstroke
收藏
订阅更新
我的文档
设置

boolean canvasrenderingcontext2d.ispointinstroke(path2d path, number x, number y)

基础库  或更高版本, 且 支付宝客户端 10.5.20 或更高版本。 若版本较低,建议采取 兼容处理

主体: 企业支付宝小程序个人支付宝小程序

检测一个点是否在路径的描边范围内。

此 api 共有 2 种用法:

ispointinstroke(number x, number y)
ispointinstroke(path2d path, number x, number y)

number x

要检测的点的 x 轴坐标。

number y

要检测的点的 y 轴坐标。

path2d path

若传入,会基于 path2d 中的路径检测,否则基于画布当前路径检测点是否在路径的描边范围内。

ide 需要 3.8.2 及以上版本支持调试。

基于当前路径判断
基于 path2d 路径判断
.js
.axml
page({
    oncanvasready() {
        my.createselectorquery().select('#canvas').node().exec(res => {
            const canvas = res[0].node
            let ctx = canvas.getcontext('2d')
            ctx.strokestyle = 'red'
            ctx.linewidth = 20
            ctx.rect(30, 30, 150, 150)
            ctx.stroke()
            this.ctx = ctx
        })
    },
    onmove(e) {
        let {x, y} = e.changedtouches[0]
        console.log(this.ctx.ispointinstroke(x, y))
    }
})
<canvas id="canvas" type="2d" onready="oncanvasready" ontouchmove="onmove" disable-scroll>canvas>
画布的当前路径中有一矩形路径已描红色边,当手指移动到矩形路径被描边区域内时,接口返回 true,否则返回 false。
.js
.axml
page({
    oncanvasready() {
        my.createselectorquery().select('#canvas').node().exec(res => {
            const canvas = res[0].node
            let ctx = canvas.getcontext('2d')
            let path = ctx.createpath2d()
            ctx.strokestyle = 'red'
            ctx.linewidth = 20
            path.rect(30, 30, 150, 150)
            ctx.stroke(path)
            this.ctx = ctx
            this.path = path
        })
    },
    onmove(e) {
        let {x, y} = e.changedtouches[0]
        console.log(this.ctx.ispointinstroke(this.path, x, y))
    }
})
<canvas id="canvas" type="2d" onready="oncanvasready" ontouchmove="onmove" disable-scroll>canvas>
此示例需要 ide 3.8.2 及以上版本支持。path2d 路径中矩形路径已描红色边,当手指移动到矩形路径被描边区域内时,接口返回 true,否则返回 false。
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图