HarmonyOS Canvas绘制出来的添加onTouch手势,但是无法移动
Canvas绘制出来的添加onTouch手势,拖动图标,给图标新的位置,但是无法移动,icon图标在附件中,代码如下:
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img: ImageBitmap = new ImageBitmap("/common/images/seek_bar_icon.png");
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@State leftTargetX: number = 100;
@State leftTargetY: number = 40;
@State rightTargetX: number = 300;
@State rightTargetY: number = 40;
@State pointSize: number = 20;
@State lineStart: number = 25;
@State lineEnd: number = 337;
@State lineY: number = 50;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() => {
this.context.lineWidth = 8;
this.context.beginPath();
this.context.strokeStyle = "#F0F0F0";
this.context.lineCap = 'round';
this.context.moveTo(this.lineStart, this.lineY);
this.context.lineTo(this.lineEnd, this.lineY);
this.context.stroke();
// 使用drawImage接口将图片画在(0,0)为起点,宽高130的区域
this.context.drawImage(this.img, 0, 0, this.pointSize, this.pointSize, this.leftTargetX, this.leftTargetY, this.pointSize, this.pointSize);
this.context.drawImage(this.img, 0, 0, this.pointSize, this.pointSize, this.rightTargetX, this.rightTargetY, this.pointSize, this.pointSize);
})
.onTouch((event: TouchEvent) => {
let x = event.touches[0].x;
let y = event.touches[0].y;
this.leftTargetX = x;
//左边范围
if (x >= (this.lineStart - this.pointSize / 2)
&& x < this.rightTargetX - this.pointSize / 2
&& y >= this.lineY - this.pointSize
&& y <= this.lineY + this.pointSize) {
this.leftTargetX = x;
console.log(`CanvasExample left====x==${x}==y==${y}`)
}
//右边
if (x > (this.leftTargetX + this.pointSize / 2)
&& x <= this.lineEnd + this.pointSize / 2
&& y >= this.lineY - this.pointSize
&& y <= this.lineY + this.pointSize) {
this.rightTargetX = x;
console.log(`CanvasExample right====x==${x}==y==${y}`)
}
})
}
.width('100%')
.height('100%')
}
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS使用Canvas自定义绘制内容后,如何根据onTouch事件动态更新绘制的内容?
312浏览 • 1回复 待解决
在项目里放一张图片然后绘制在canvas上是可以绘制出来的,但是如果把图片路径改成沙箱内的路径,绘制不成功
5770浏览 • 1回复 待解决
HarmonyOS LongPressGesture手势移动问题
382浏览 • 1回复 待解决
如何操作canvas重新绘制
1010浏览 • 1回复 待解决
HarmonyOS Canvas中如何绘制文本溢出效果?
242浏览 • 1回复 待解决
Canvas绘制内容如何动态更新
1526浏览 • 1回复 待解决
HarmonyOS Canvas中关于绘制图片问题
297浏览 • 1回复 待解决
Canvas如何触发刷新重复绘制?
881浏览 • 1回复 待解决
canvas怎么绘制资源目录下的图片
629浏览 • 1回复 待解决
HarmonyOS 如何实现清除canvas内容,重新绘制?
278浏览 • 1回复 待解决
添加lib时【兼容的SDK最低版本】刷不出来,无法正常添加库
4789浏览 • 1回复 待解决
如何使用canvas绘制圆角矩形
496浏览 • 1回复 待解决
HarmonyOS 怎么区分缩放地图和手势触发移动地图
525浏览 • 1回复 待解决
HarmonyOS app模块拆分,图标在A模块,A模块绘制绘制不出来,但A不是根模块
330浏览 • 1回复 待解决
如何使用canvas添加水印
1290浏览 • 1回复 待解决
HarmonyOS Canvas.drawImage怎么绘制本地图片,并指定大小?
89浏览 • 0回复 待解决
Hyperlink的onTouch预览报错
1912浏览 • 1回复 待解决
Canvas如何绘制app.media下面的图片?
2296浏览 • 1回复 待解决
HarmonyOS CustomDialogController无法在jsbridge弹出来
242浏览 • 1回复 待解决
在Scroll里面嵌套的tabs组件中添加手势操作
861浏览 • 1回复 待解决
如何在使用 Canvas 绘制图像时处理像素模糊问题?
105浏览 • 0回复 待解决
HarmonyOS Button 无法添加margin left right
192浏览 • 1回复 待解决
button嵌套时,外部使用stopPropagation无法阻止内部的button触发onTouch
336浏览 • 1回复 待解决
HarmonyOS pushService.getToken()获取成功,但是无法推送
328浏览 • 1回复 待解决
使用canvas渲染文本时,如何基于文本变化,正确绘制出对应的内容?
1755浏览 • 1回复 待解决
可以使用onTouch事件判断触摸点是否是可移动区域,再通过PanGesture
链接:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-gestures-pangestur
手势控制坐标点的移动,提供以下案例参考:
onTouch事件是开始刚触摸到屏幕时会触发,但是现在需要实现的需求是在拖动时画布上的元素变化,需要记录手指/鼠标的偏移量,所以使用PanGesture拖动手势更合适
开发者也可以只使用PanGesture拖动,代码样例: