最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

canvas像素点实现镜像翻转

JavaScript AZ 2868浏览 0评论

最近开发扫地机项目网站,后台实现清扫记录展示,地图和坐标需要转换才能正确显示。机器中的世界是跟我们现实图中相反的,需要Y轴翻转。网上搜罗下,大部分是小平翻转。最后在找到类似的原理的代码(https://www.deanhan.cn/mirror.html),记录方便以后有人找。

canvas镜像翻转的原理就是从原图像或者原Canvas的边角获取相应长宽的像素值,然后对获取的像素值进行反转(上下竖向反转,左右横向反转),再将反转后的像素绘制到对应的镜像边框上。

function drawMap(ab, w, h, lz4_len) {
var imgData = mapCanvasCtx.getImageData(0, 0, w, h);
//填充图片
if (uncompressedSize > 0) {
for (var i = uncompressedSize; i >= 0; i–) {
imgData.data[4 * i] = uncompressed[i];
imgData.data[4 * i + 1] = uncompressed[i];
imgData.data[4 * i + 2] = uncompressed[i];
imgData.data[4 * i + 3] = 0xff;
}
}
//填充路径
mapCanvasCtx.putImageData(imgData, 0, 0);
var newImgData = mapCanvasCtx.getImageData(0, 0, w, h);//再次取得数据
mapCanvasCtx.putImageData(imageDataVRevert(newImgData, imgData), 0, 0);
}
//竖向像素反转
function imageDataVRevert(sourceData, newData) {
for (var i = 0, h = sourceData.height; i < h; i++) {
for (var j = 0, w = sourceData.width; j < w; j++) {
newData.data[i * w * 4 + j * 4 + 0] = sourceData.data[(h – i) * w * 4 + j * 4 + 0];
newData.data[i * w * 4 + j * 4 + 1] = sourceData.data[(h – i) * w * 4 + j * 4 + 1];
newData.data[i * w * 4 + j * 4 + 2] = sourceData.data[(h – i) * w * 4 + j * 4 + 2];
newData.data[i * w * 4 + j * 4 + 3] = sourceData.data[(h – i) * w * 4 + j * 4 + 3];
}
}
return newData;
}
//横向像素反转
function imageDataHRevert(sourceData, newData) {
for (var i = 0, h = sourceData.height; i < h; i++) {
for (j = 0, w = sourceData.width; j < w; j++) {
newData.data[i * w * 4 + j * 4 + 0] = sourceData.data[i * w * 4 + (w – j) * 4 + 0];
newData.data[i * w * 4 + j * 4 + 1] = sourceData.data[i * w * 4 + (w – j) * 4 + 1];
newData.data[i * w * 4 + j * 4 + 2] = sourceData.data[i * w * 4 + (w – j) * 4 + 2];
newData.data[i * w * 4 + j * 4 + 3] = sourceData.data[i * w * 4 + (w – j) * 4 + 3];
}
}
return newData;
}

转载请注明:TUTERM.COM » canvas像素点实现镜像翻转

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!