canvas根据坐标完成室内地图路线的绘制

canvas根据坐标完成室内地图路线的绘制

注释：此版本为低版本，后续会完善，只是提供一个思路
html:
	<canvas id="canvas" width="5083px" height="6579px"></canvas>
	
style:
	<script>
            var c=document.getElementById( "canvas");
            var ctx=c.getContext( "2d");
            var piece = [{"startX": xxx, "startY": xxx, "endX": xxx, "endY": xxx}, {"startX": xxx, "startY": xxx, "endX": xxx, "endY": xxx}];
            for (var i = 0; i < piece.length; i++) {
                    ctx.beginPath();
                    ctx.moveTo(piece[i].startX,piece[i].startY);
                    ctx.lineTo(piece[i].endX, piece[i].endY);
                    ctx.strokeStyle='rgb(255,0,0)';
                    ctx.stroke();
                }
    </script>

注释：获取地图详情代码有一个逻辑问题，后续会修改（如果只有一条路径，那么逻辑没有问题）
view：
	def get_mapdetail(request):
        """获取地图详情"""

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

        m = Map.objects.get(id=map_index)
        L = m.location_set.all()
        l_len = len(L)
        context = {}
        list = []
        if l_len <= 1:
            print('只有一个点')
        for i in range(l_len-1):
            list.append({
                'startX': L[i].loc2_x,
                'startY': L[i].loc2_y,
                'endX': L[i+1].loc2_x,
                'endY': L[i+1].loc2_y
            })
        context['loc_data'] = list

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

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

        return new_img_path

------------------------------------------------------更新----------------------------------------------------

// 前端的功能实现函数
 clickrow(row){  // 点击一行数据,触发事件
     axios.get('/mappath/', {params: {map_name: row.name}})
         .then(function (res) {
             console.log(res.data['loc_data']);

             var c = document.getElementById( "canvas");
             var ctx = c.getContext( "2d");
             this.piece = res.data['loc_data'];
             for (var i = 0; i < piece.length; i++) {
                 ctx.beginPath();
                 ctx.moveTo(piece[i].startX,piece[i].startY);
                 ctx.lineTo(piece[i].endX, piece[i].endY);
                 ctx.strokeStyle='rgb(255,0,0)';
                 ctx.stroke();
             }

         })
         .catch(function (error){
             console.log(error)
         })
 },

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

    L = m.location_set.all()
    l_len = len(L)
    context = {}
    list = []
    if l_len <= 1:
        print('只有一个点')
    if wimg >= 1276 and himg >= 800:
        for i in range(l_len-1):
            list.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)
            })
    else:
        for i in range(l_len-1):
            list.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)
            })

    context['loc_data'] = list

    return JsonResponse(context)