首页 新闻 会员 周边

html canvas 移动有被擦除图像

0
悬赏园豆:200 [待解决问题]

canvas 渲染一张图像后并对canvas设置了移动事件让图像可以移动. 此时的canvas 对图像点进行擦除(橡皮擦功能), 那此时 继续移动图像 如何让图像带有擦除的样子

问题补充:

补充功能描述:
可以对canvas里面的图像进行移动,还有一个橡皮擦功能,对canvas里面的图像(图片)进行了擦除操作,图像这时候是有擦除痕迹的。此时对canvas里面的图像进行移动操作,如何在移动图像的时候也显示着擦除痕迹

啊哒。的主页 啊哒。 | 初学一级 | 园豆:4
提问于:2022-05-18 13:20

有木有思路啥的

啊哒。 2年前
< >
分享
所有回答(1)
0

要让移动后的图像带有擦除的样子,可以在移动事件中记录移动的轨迹,然后将轨迹上的像素点逐一进行绘制,这样就可以在图像移动的同时保留原有的擦除痕迹。

具体实现可以按照以下步骤进行:

1.在移动事件中记录移动轨迹,可以使用一个数组来存储每个移动事件的坐标点。

2.在移动事件中获取需要擦除的区域,可以使用globalCompositeOperation属性设置为destination-out来实现橡皮擦功能。

3.在移动事件结束后,将移动轨迹上的像素点逐一进行绘制,可以使用putImageData()方法将像素点重新绘制到画布上,这样就可以保留原有的擦除痕迹。

示例代码如下:

javascript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let isDragging = false;
let lastX, lastY;
let erasedPoints = [];

// 渲染图像
const img = new Image();
img.src = 'image.png';
img.onload = () => {
ctx.drawImage(img, 0, 0);
};

// 监听鼠标移动事件
canvas.addEventListener('mousemove', (e) => {
if (!isDragging) {
return;
}

const x = e.clientX - canvas.offsetLeft;
const y = e.clientY - canvas.offsetTop;

// 记录移动轨迹
erasedPoints.push({ x, y });

// 擦除图像
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.globalCompositeOperation = 'destination-out';
ctx.fill();

lastX = x;
lastY = y;
});

// 监听鼠标按下事件
canvas.addEventListener('mousedown', (e) => {
isDragging = true;
lastX = e.clientX - canvas.offsetLeft;
lastY = e.clientY - canvas.offsetTop;
});

// 监听鼠标松开事件
canvas.addEventListener('mouseup', () => {
isDragging = false;

// 将移动轨迹上的像素点重新绘制到画布上
for (let i = 0; i < erasedPoints.length; i++) {
const point = erasedPoints[i];
const imageData = ctx.getImageData(point.x - 10, point.y - 10, 20, 20);
ctx.putImageData(imageData, point.x - 10, point.y - 10);
}

// 清空移动轨迹数组
erasedPoints = [];
});
在上述代码中,首先通过drawImage()方法渲染了一张图像。然后,监听了鼠标移动事件,在移动事件中记录了移动轨迹,并擦除了图像。最后,在鼠标松开事件中,将移动轨迹上的像素点重新绘制到画布上,

Technologyforgood | 园豆:6498 (大侠五级) | 2023-04-10 21:23

感谢大佬回答。我的问题描述的不够清晰。
你的示例是在鼠标松开时复原数据,但是我想要的是在边移动边显示;
大佬推荐的putImageData方式思路也挺不错的 我尝试看看在边移动边复原数据会怎么样不知道会不会有计算太大的问题,我现在试一下,感谢大佬的思路 🙏🙏

支持(0) 反对(0) 啊哒。 | 园豆:4 (初学一级) | 2023-04-10 22:02
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册