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。