canvas绘制可缩放的室内地图和路径

最新推荐文章于 2024-10-29 11:50:18 发布
最新推荐文章于 2024-10-29 11:50:18 发布
阅读量2.2k 收藏 13
点赞数 1
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45223595/article/details/117222762
版权

最近一直在写canvas绘制室内地图和路径这个功能，大致聊一下这个功能讲了什么。

具体是需要用canvas将室内地图绘制出来（这个不难，canvas教程有），并且地图需要能进行放大缩小，同时将地图上的路径进行展示，同样需要能放大缩小。

其实不能看出，就是将地图和路径进行同时的放大缩小。

我之前的思路是（之前没有要求缩放），创建canvas，然后设置背景（背景就是地图），然后将后端的路径数据展示到前端背景上，具体的实现，之前的博客有说明，可以翻翻看。

之后添加一个功能就是要求能将地图和路径能进行缩放，那么再将地图作为背景就不能实现缩放，所以我就使用canvas先绘制一个图片，先实现图片缩放，再在图片缩放的同时将路径数据放入到图片中，实现在绘制图片的同时，顺带加上路径数据。这是我的思路，因为没系统的接触过canvas，不知道还有没有别的思路和方法，总感觉我的还是有问题。

具体流程：（html + vue + django）

HTML：
<canvas id="scaleDragCanvas" width="1276" height="800"></canvas>

vue、js:
	var img_path = res.data['img_path'];  // 不用太在意，图片路径
	var piece = res.data['loc_data'];  // 不用太在意，路径数据
	_this.rountData = res.data['rount_data'];  // 不用太在意，路线数据
	
	var canvas, context;
    var showTips = null, originalPos = null;
    var initWidth = 0, initHeight = 0;
    var img, imgX = 0, imgY = 0, imgScale = 1, scaleRate = 1, scaleRatey = 1;  // imgScale 缩放比例  scaleRate 图片比例尺 imgX 图片左上角坐标
    var MINIMUM_SCALE = 1 ,pos = {}, posl = {}, dragging = false;
    var rount_len = res.data['loc_data'].length;
    
    (function int() {  // 缩放主函数
        canvas = document.getElementById('scaleDragCanvas');  // 画布对象
        context = canvas.getContext('2d');  // 画布显示二维图片

    	loadImg();
    	canvasEventsInit();  // 转换坐标

	})();
	
	
    function stroke() {  // 缩放路径
    	var color_list = ['rgb(255,0,0)',  'rgb(255,255,0)', 'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(255,0,255)', 'rgb(0,0,0)'];
    	for (var j = 0; j < rount_len; j++){
    		piece = res.data['loc_data'][j];
    		context.strokeStyle = color_list[j];
    		for (var i = 0; i < piece.length; i++) {
    			context.beginPath();
    			context.moveTo((piece[i].startX)*(imgScale),(piece[i].startY)*(imgScale));
    			context.lineTo((piece[i].endX)*(imgScale), (piece[i].endY)*(imgScale));
    			context.stroke();
    		}
    	}
    }
    
    function strokemove() {  // 移动路径
    	var color_list = ['rgb(255,0,0)',  'rgb(255,255,0)', 'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(255,0,255)', 'rgb(0,0,0)'];
    	for (var j = 0; j < rount_len; j++){
    		piece = res.data['loc_data'][j];
    		context.strokeStyle = color_list[j];
    		for (var i = 0; i < piece.length; i++) {
    			context.beginPath();
    			context.moveTo(((piece[i].startX)*(imgScale))+imgX,((piece[i].startY)*(imgScale))+imgY);
    			context.lineTo(((piece[i].endX)*(imgScale))+imgX, ((piece[i].endY)*(imgScale))+imgY);
    			context.stroke();
    		}
    	}
    }
    
    function loadImg() {  // 画图主函数
    	img = new Image();
    	img.onload = function () {
    	scaleRate = img.width / canvas.width;  // 让长宽保持相同缩放比例
    	scaleRatey = img.height / canvas.height;
    	initWidth = img.width * scaleRate;
    	initHeight = img.height * scaleRatey;

		console.log("initWidth=" + initWidth + ",initHeight=" + initHeight + ", scaleRate=" + scaleRate + ", scaleRatey=" + scaleRatey);
		drawImage();
		};
		img.src ='/media/maps/' + img_path;
	}
	
	function drawImage() {  // 画图副函数
    	context.clearRect(0, 0, canvas.width, canvas.height);  // 清空给定矩形内的指定像素

        // 保证  imgX  在  [img.width*(1-imgScale),0]   区间内
        ///**
		if(imgX<img.width*(1-imgScale) /scaleRate) {
			imgX = img.width*(1-imgScale)/scaleRate ;
		}else if(imgX>0) {
			imgX=0
		}
        // 保证  imgY   在  [img.height*(1-imgScale),0]   区间内
        if(imgY<img.height*(1-imgScale)/scaleRatey) {
			imgY = img.height*(1-imgScale)/scaleRatey;
		}else if(imgY>0) {
			imgY=0
		}
		//*/

		context.drawImage(
			img, //规定要使用的图像、画布或视频。
			0, 0, //开始剪切的 xy 坐标位置。
			initWidth, initHeight,  //被剪切图像的高度。
			imgX, imgY,//在画布上放置图像的 x 、y坐标位置。
			img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
		);

		stroke();
	}
	
	/*事件注册*/
    function canvasEventsInit() {
    	canvas.onmousedown = function (event) {  //  鼠标按下
        	if(showTips == null){
                dragging = true;
                pos = windowToCanvas(event.clientX, event.clientY);  // 坐标转换，将窗口坐标转换成canvas的坐标
            }
        };
       canvas.onmousemove = function (evt) {  // 鼠标移动
            if(showTips != null){
                // 测距功能
                if(showTips){
            		showPosTips(originalPos.x, originalPos.y, evt);
            	}
			}else{

                if(dragging){
                	posl = windowToCanvas(evt.clientX, evt.clientY);

					let x = posl.x - pos.x, y = posl.y - pos.y;
                    imgX  += x;
                    imgY  += y;

					pos = JSON.parse(JSON.stringify(posl));

					context.clearRect(0, 0, canvas.width, canvas.height);  // 清空给定矩形内的指定像素

                    // 保证  imgX  在  [img.width*(1-imgScale),0]   区间内
                    ///**
                    if(imgX<img.width*(1-imgScale) /scaleRate) {
						imgX = img.width*(1-imgScale)/scaleRate ;
					}else if(imgX>0) {
						imgX=0
					}
                    // 保证  imgY   在  [img.height*(1-imgScale),0]   区间内
                    if(imgY<img.height*(1-imgScale)/scaleRatey) {
						imgY = img.height*(1-imgScale)/scaleRatey;
					}else if(imgY>0) {
                    	imgY=0
                    }
					//*/

					context.drawImage(
                        img, //规定要使用的图像、画布或视频。
                        0, 0, //开始剪切的 xy 坐标位置。
                        initWidth, initHeight,  //被剪切图像的高度。
                        imgX, imgY,//在画布上放置图像的 x 、y坐标位置。
                        img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
					);
					strokemove();

                }else{
					let pos3 = windowToCanvas(evt.clientX, evt.clientY);
					if(context.isPointInPath(pos3.x, pos3.y)){
						console.log("进入区域");
					}
				}
			}
		};
		canvas.onmouseup = function (evt) {  // 鼠标抬起
            if(showTips != null){
				if(!showTips){
					showTips = true;
				}else{
					showTips = null;
				}
			}else{
				dragging = false;
			}
		};
		canvas.onmousewheel = canvas.onwheel = function (event) {    //滚轮放大缩小
			let pos = windowToCanvas (event.clientX, event.clientY);
			event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40));  //获取当前鼠标的滚动情况
            let newPos = {x:((pos.x-imgX)/imgScale).toFixed(2) , y:((pos.y-imgY)/imgScale).toFixed(2)};
			if (event.wheelDelta > 0) {// 放大
                imgScale +=0.1;
                imgX = 0;
                imgY = 0;
			} else {//  缩小
                imgScale -=0.1;
                if(imgScale<MINIMUM_SCALE) {//最小缩放1
				imgScale = MINIMUM_SCALE;
				}
                imgX = 0;
                imgY = 0;
			}
			drawImage();   //重新绘制图片
		};
		canvas.addEventListener('dblclick', function (event) {  // 双击
            let pos = windowToCanvas(event.clientX,event.clientY);
            //实际点的坐标
            let isX = 0;
            let isY = 0;
            //实际选中坐标 肯定 = 点击的坐标 + canvas的坐标(必须为-数)
            let temp_canvas_x = imgX-imgX*2;
            let temp_canvas_y = imgY-imgY*2;

            scaleRate = img.width / canvas.width;  // 让长宽保持相同缩放比例
            scaleRatey = img.height / canvas.height;

			if(imgScale === 1){ //原始尺寸
                isX = (pos.x+temp_canvas_x)*scaleRate;
                isY = (pos.y+temp_canvas_y)*scaleRatey;
				axios.get('/api/loc/', {params: {'loc_x': isX, 'loc_y': isY}})
			} else {
				if (imgScale > 1) { //被放大了,实际坐标需要/
                    isX = ((pos.x + temp_canvas_x) / imgScale)*scaleRate;
                    isY = ((pos.y + temp_canvas_y) / imgScale)*scaleRatey;
                    console.log(isX, isY);
                    axios.get('/api/loc/', {params: {'loc_x': isX, 'loc_y': isY}})
				} else { //被缩小了,坐标点放大
                    isX = ((pos.x + temp_canvas_x) * (1 / imgScale))*scaleRate;
                    isY = ((pos.y + temp_canvas_y) * (1 / imgScale)*scaleRatey);
                    console.log(isX, isY);
                    axios.get('/api/loc/', {params: {'loc_x': isX, 'loc_y': isY}})
				}
			}
		});

	}

	function showPosTips(x, y, evt){
        drawImage();
            context.beginPath();
            context.stokeStyle="#f00";
            context.moveTo(x, y);
            let temp = windowToCanvas(evt.clientX, evt.clientY);
            context.lineTo(temp.x, temp.y);
            context.stroke();
            document.getElementById("mouseTip").innerHTML = temp.x + "," + temp.y;
            document.getElementById("mouseTip").style.left = evt.clientX + 'px';
            document.getElementById("mouseTip").style.top = evt.clientY + 'px';
		}

	/*坐标转换*/
	function windowToCanvas(x,y) {
    var box = canvas.getBoundingClientRect();
    //console.log( "x=" + (x - box.left - (box.width - canvas.width) / 2) + ",y=" + (y - box.top - (box.height - canvas.height) / 2));
    //这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
    return {
        x: x - box.left - (box.width - canvas.width) / 2,
        y: y - box.top - (box.height - canvas.height) / 2
	};
}

django：
# api
@csrf_exempt
def get_loc(request):
    """保存地图路径到数据库"""

    json_str = request.body.decode()
    req_data = json.loads(json_str)

    req_data = req_data['loc_data']   # 一个大的列表

    req_len = len(req_data)
    for i in range(req_len):
        map_name = ((req_data[i]['map_name']).split('.')[0]) + '.jpg'
        rount_index = req_data[i]['rount_index']
        loc = req_data[i]['loc']   # 一个列表
        loc_len = len(loc)
        for i in range(loc_len):
            loc_seq = loc[i]['loc_seq']
            loc_x = loc[i]['loc_x']
            loc_y = loc[i]['loc_y']
            try:
                map = Map.objects.get(name=map_name)
                Location.objects.create(loc2_index=rount_index, loc2_x=loc_x, loc2_y=loc_y, loc2_seq=loc_seq, mid_id=map.id)
            except Exception as e:
                print(e)
                return HttpResponse('not ok')

    return HttpResponse('is ok!!!')


# api
@csrf_exempt
def get_map(request):
    """保存地图"""

    car_index = request.POST.get('car_index')
    img = request.FILES.get('img')
    map_name = request.POST.get('map_name')

    if img is None:
        return HttpResponse('img is not ok')

    try:
        robot = Robot.objects.get(car_index=car_index)
        Map.objects.create(name=map_name, rid_id=robot.id, img=img)
    except Exception as e:
        print(e)

        return HttpResponse('mysql not ok')

    new_img_path, new_img_name = pgm_tojpg(map_name)
    Map.objects.filter(name=map_name).update(name=new_img_name, img=new_img_path)

    return HttpResponse('is ok!!!')


def pgm_tojpg(img_name):
    """pgm转换成jpg"""

    img = Image.open(MEDIA_ROOT + '/maps/' + img_name)
    img_name = img_name.split('.')[0]
    new_img_name = img_name + '.jpg'
    new_img_path = 'maps/' + img_name + '.jpg'
    img.save(MEDIA_ROOT + '/maps/' + img_name + '.jpg')

    return new_img_path, new_img_name


def get_mapdetail(request):
    """获取地图详情: 坐标，路线"""

    map_name = request.GET.get('map_name')

    m = Map.objects.get(name=map_name)

    img = Image.open(MEDIA_ROOT + '/maps/' + map_name)
    wimg = img.width
    himg = img.height

    rount = m.location_set.values('loc2_index').distinct()
    list3 = []
    color_list = [{"rgb(255,0,0)": "红"},  {"rgb(255,255,0)": "黄"}, {"rgb(0,255,0)": "青"}, {"rgb(0,0,255)": "蓝"}, {"rgb(255,0,255)": "紫"}, {"rgb(0,0,0)": "黑"}]
    for r in rount:
        list3.append({
            'rount_index': (r['loc2_index']).split('rount_')[1],
            'rount_name': r['loc2_index'],
            'rount_color': list(color_list[int((r['loc2_index']).split('rount_')[1])-1].values())[0]
        })
    print(list3)
    rount_count = rount.count()  # 多少条路线
    context = {}
    list1 = []
    for i in range(rount_count):

        list2 = []
        rount_index = 'rount_' + str(i+1)
        L = m.location_set.filter(loc2_index=rount_index)

        l_len = len(L)
        if l_len <= 1:
            print('只有一个点')
        if wimg >= 1276 and himg >= 800:
            for i in range(l_len - 1):
                list2.append({
                    'startX': float(L[i].loc2_x) / (wimg / 1276),  # 5083  6597
                    'startY': float(L[i].loc2_y) / (himg / 800),
                    'endX': float(L[i + 1].loc2_x) / (wimg / 1276),
                    'endY': float(L[i + 1].loc2_y) / (himg / 800)
                })
            list1.append(list2)
        else:
            for i in range(l_len - 1):
                list2.append({
                    'startX': float(L[i].loc2_x) * (wimg / 1276),
                    'startY': float(L[i].loc2_y) * (himg / 800),
                    'endX': float(L[i + 1].loc2_x) * (wimg / 1276),
                    'endY': float(L[i + 1].loc2_y) * (himg / 800)
                })
            list1.append(list2)

    context['loc_data'] = list1
    context['img_path'] = map_name
    context['rount_data'] = list3

    return JsonResponse(data=context)


# api
@csrf_exempt
def set_loc(request):
    """传递坐标给小车"""

    loc_x = request.GET.get('loc_x')
    loc_y = request.GET.get('loc_y')
    context = {}

    context['loc_x'] = loc_x
    context['loc_y'] = loc_y
    print(context)

    res = upload_rount(context)

    return JsonResponse(res, safe=False)


# api
@csrf_exempt
def set_rount(request):
    """传递路线"""

    rount_index = request.GET.get('rount_index')
    res = upload_rount(rount_index)

    return JsonResponse(res, safe=False)
基于HTML5 Canvas绘制的支持手势缩放的室内地图
licaomeng的专栏
11-30 2万+
你是否有过这样的经历，在大型的商圈、商场中傻傻找不到路。嗯，室内地图就这样应运而生了。百度地图、高德地图等都提供了室内地图的功能，高德地图最近还把室内地图的API开放了。室内地图的导航、定位功能一定是未来几年非常有前途的一件事。本文提供了一种基于HTML5 Canvas绘制室内地图的方案，更重要的是可以支持手势的缩放。先来看看室内地图的效果gif动图吧：
超简单的canvas绘制地图
weixin_34387468的博客
02-24 1949
    本文使用geojson数据，通过缩放和平移把地图的地理坐标系转换canvas的屏幕坐标系，然后将转换后的数据绘制到canvas上。     首先要计算数据的最大最小值，遍历所有坐标点的最大最小经纬度。在这个步骤要注意坐标点是否都遍历到，因为数据中可能会有多面和洞的存在。     第二步就是转换坐标系，地理坐标系转换canvas的屏幕坐标系。为了让地图能完整在页面展示，我们要有数据的最大最小...
canvas根据坐标完成室内地图路线的绘制
一杯清茶的博客
04-19 1566
canvas根据坐标完成室内地图路线的绘制 注释：此版本为低版本，后续会完善，只是提供一个思路 html: <canvas id="canvas" width="5083px" height="6579px"></canvas> style: <script> var c=document.getElementById( "canvas"); var ctx=c.getContext( "2d");
html5 canvas室内轨迹
04-05
最近公司需要开发一个室内轨迹图，折磨了好几天，终于完成，有需要的可以下载看看，
Canvas绘制地图
qq_40289557的博客
02-22 9691
在我们的大屏可视化项目中，地图数据可视化是最常见功能。地图数据可视化目前的实现方案有很多，其中最具有代表性的莫过于使用echarts，引入一个js文件，再加上一些简单的配置，这样一个地图就展示出来了。但是作为一名优秀的前端程序员，对于很多技术，我们既要知其然，也要只其所以然，本章节以HTML5中的Canvas技术为背景，简单讲解一下地图数据可视化实现的一些思路。
使用Canvas绘制地图
最新发布
weixin_63443072的博客
10-29 718
既然是通过canvas来绘制地图，那肯定是需要地图的数据信息的。接下来跟着我的脚步去实现这些细节。
微信小程序canvas实现文字缩放
01-12
在微信小程序中，canvas元素是用于图形绘制的重要组件，它提供了丰富的API，使得开发者能够进行动态的、交互式的图形操作，包括文字的绘制和缩放。这篇内容将深入讲解如何在微信小程序的canvas环境中实现文字的缩放...
canvas绘制风场效果
03-22
部署方面，由于canvas绘制的风场效果是一个Web应用程序，因此需要将其部署到Web服务器上，例如Nginx、Apache或Tomcat。这些服务器软件可以处理HTTP请求并返回HTML、CSS和JavaScript资源，使用户能够在浏览器中访问和...
vue+canvas绘制图形
01-09
总之，"vue+canvas绘制图形"项目展示了如何利用Vue的组件化思想和Canvas的绘图能力，创建出具有动态效果和用户交互的前端应用。通过学习和实践这种方式，开发者可以提高自己的前端技能，为网页带来更丰富的视觉体验...
Map:canvas绘制地图
06-16
Map canvas绘制地图
室内矢量地图
12-07
html5实现炫酷室内地图，矢量地图，缩放不失真，可拖拽，商铺点击变色，适用于Android、iOS、web,功能强大。
H5 Canvas实现地图，结合 httpgeojson.io 可自由绘制地图.rar
10-19
HTML5 Canvas实现中国地图（可展开地级市子地图），地图是基于 Echart的
使用HTML5 Canvas绘制 3D房间模型和人物动画特效
01-06
使用HTML5 Canvas绘制 3D房间模型和人物动画特效
室内地图
02-17
Azure地图控制室内地图的实验 包括： 弹出窗口 热图
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
### Vue使用Canvas绘制图片 在Vue中使用Canvas绘制图片首先需要通过`<canvas>`元素创建一个画布。然后在Vue组件中通过JavaScript获取这个Canvas的上下文(context)并利用`drawImage`方法将图片绘制到Canvas上。`...
vue 实现canvas绘制地图，引用图片，对画布进行原点 滚轮缩放，按键缩放，拖动等功能 把pagex转化为offsetx
weixin_52633842的博客
05-06 4418
vue 实现canvas绘制地图，引用图片，对画布进行原点 滚轮缩放，按键缩放，拖动等功能
leaflet室内地图\平面图点线面绘制
阿晨的博客
06-18 1242
leaflet室内地图\平面图点线面绘制
使用HTML5 canvas做地图（1）基础知识
weixin_30344795的博客
11-16 502
之前一直想使用HTML5技术全新做一套地图API，可是苦于时间和精力，迟迟未有行动。后来下定决心，利用下班和周末做出一个大体框架出来，现在和网友分享一下自己的整体的一个思路和想法。欢迎大家提出宝贵建议，希望把这套API做的更好，有人真正利用起来。DEMO访问地址， 猛击这里。 数据 我们看到的电子地图是多个图层叠加之后的效果，每一个图层都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值