lineTo3D/js/main.js

// 3d点坐标
var r2x = [
  // 俯视面
  [-1.92, 0.034, 1.5],
  [-2.92, 0.284, 1.5],
  [-6.02, 0.284, 1.5],
  [-6.02, 3.934, 1.5],
  [2.53, 3.934, 1.5],
  [2.53, 1.684, 1.5],
  [3.13, 1.684, 1.5],
  [3.13, 0.584, 1.5],
  [2.23, 0.584, 1.5],
  [2.23, 0.034, 1.5],

  // 仰视面
  [-1.92, 0.034, -1.5],
  [-2.92, 0.284, -1.5],
  [-6.02, 0.284, -1.5],
  [-6.02, 3.934, -1.5],
  [2.53, 3.934, -1.5],
  [2.53, 1.684, -1.5],
  [3.13, 1.684, -1.5],
  [3.13, 0.584, -1.5],
  [2.23, 0.584, -1.5],
  [2.23, 0.034, -1.5]
];
// 顶点索引
var r10x = 10;
var r3x = [
  [0, 1],
  [1, 2],
  [2, 3],
  [3, 4],
  [4, 5],
  [5, 6],
  [6, 7],
  [7, 8], 
  [8, 9],
  [9, 0],

  [r10x + 0, r10x + 1],
  [r10x + 1, r10x + 2],
  [r10x + 2, r10x + 3],
  [r10x + 3, r10x + 4],
  [r10x + 4, r10x + 5],
  [r10x + 5, r10x + 6],
  [r10x + 6, r10x + 7],
  [r10x + 7, r10x + 8],
  [r10x + 8, r10x + 9],
  [r10x + 9, r10x + 0],

  [0, r10x + 0],
  [1, r10x + 1],
  [2, r10x + 2],
  [3, r10x + 3],
  [4, r10x + 4],
  [5, r10x + 5],
  [6, r10x + 6],
  [7, r10x + 7],
  [8, r10x + 8],
  [9, r10x + 9]
];
// 线段
var ret = [
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  []
];
var canvas = document.getElementById("myCanvas");
var img = new Image();
// var identity = numbers.matrix.identity(4);
var accuracy = 0.02;
// 缩放精度
var scaleAccuracy = 0.05;
var maxX = 0;
var faceLineArr = [];
var isScale = false;
var scaleTime;
var scaleTimeH;

// 各个面的数组集合
var faceArr = [
  [21, 11, 22, 1],
  [22, 12, 23, 2],
  [20, 10, 21, 0],
  [23, 13, 24, 3],
  // [24, 14, 15, 26, 5, 4],
  // [26, 16, 27, 6],
  // [27, 17, 28, 7],
  [28, 18, 29, 8],
  [29, 19, 20, 9],
  // [19, 18, 17, 16, 15, 25, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 14, 13, 12, 11, 10],
  // [25, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4],
  // [5, 6, 7, 8, 9, 0, 1, 2, 3, 4]
];

var verticalLine=[]

var verticalArr = []
var verticalVec = []

var selectArray;
var selectArr;
var selectArrIdx;
var selectVerticalLine;
var rx1 = _3dLine(r2x, r3x, ret);

img.onload = function() {
  draw();
};
img.src = "./img/panorama_demo.input.jpg";

function draw() {
  var w = img.width / 6;
  var h = img.height / 6;
  var deltaFactor = 1;
  var distance = 0;
  canvas.width = w;
  canvas.height = h;
  scaleTime = w;
  scaleTimeH = h;
  var context = canvas.getContext("2d");
  context.strokeStyle = "#ff0000";
  context.lineWidth = w / 250;
  // 生成3d格式数据
  fix3dLineArr(rx1,faceArr)
 
  
  var lineArr = _3dTo2d(
    make_matrix_from_quat([
      0.008515,
      -0.014279,
      0.016179,
      0.999731,
      -5.438891,
      2.167653,
      0.165233
    ]),
    rx1,
    0.1
  )['drawArr'];

  $("#myCanvas").click(function(e) {
    // 获取当前的坐标点
    var current = [e.offsetX, e.offsetY];
    // 计算当前坐标点到墙面中心店的距离
    // selectArr = selectWhichFace(lineArr,faceArr);
    selectArray = selectWhichFace(
      lineArr,
      faceArr,
      current,
      rx1,
      scaleTime,
      scaleTimeH
    )[0];
    selectVerticalLine = selectWhichFace(
      lineArr,
      faceArr,
      current,
      rx1,
      scaleTime,
      scaleTimeH
    )[1];
    
    verticalArr = findverticalLine(selectVerticalLine,rx1).lineAry
    verticalVec = findverticalLine(selectVerticalLine,rx1).verticalVec
    
    selectArr = selectArray["arr"];
    selectArrIdx = faceArr[selectArray["id"]];
    // selectArr = [lineArr[1],lineArr[22],lineArr[11],lineArr[21]]

    // 判断当前点在墙面之内时,选中改墙体区域
    if (isInFace(current, selectArr, scaleTime, scaleTimeH)) {
      // if (true) {
      isScale = true;
      // 选中的墙进行画线
      selectDragLine(context, w, h, scaleTime, scaleTimeH, lineArr, selectArr);
    } else {
      // 未选中墙体时还原线段
      context.strokeStyle = "#ff0000";
      drawSingleLine(context, w, h, scaleTime, scaleTimeH, lineArr, true);
      isScale = false;
    }
  });
  $("#myCanvas").mousewheel(function(e) {
    (function() {
      if (isScale) {
        distance = deltaFactor * e.deltaY * scaleAccuracy;

        lineArr = updateLineArr(distance, lineArr, rx1, r2x,selectArrIdx,verticalVec);
        selectArrIdx = faceArr[selectArray["id"]];

        selectArr = updateSelectArr(lineArr, selectArrIdx);
        selectDragLine(
          context,
          w,
          h,
          scaleTime,
          scaleTimeH,
          lineArr,
          selectArr
        );
      }
    })();
  });
  // 监听键盘按下时间 (上键为放大,下键为缩小)
  $("body").keydown(function(e) {
    if (isScale) {
      if (e.keyCode == 38) {
        distance = deltaFactor * 1 * scaleAccuracy;
        lineArr = updateLineArr(distance, lineArr, rx1, r2x,selectArrIdx,verticalVec);
        selectArrIdx = faceArr[selectArray["id"]];

        selectArr = updateSelectArr(lineArr, selectArrIdx);
        selectDragLine(
          context,
          w,
          h,
          scaleTime,
          scaleTimeH,
          lineArr,
          selectArr
        );
      } else if (e.keyCode == 40) {
        distance = deltaFactor * -1 * scaleAccuracy;
        lineArr = updateLineArr(distance, lineArr, rx1, r2x,selectArrIdx,verticalVec);
        selectArrIdx = faceArr[selectArray["id"]];

        selectArr = updateSelectArr(lineArr, selectArrIdx);
        selectDragLine(
          context,
          w,
          h,
          scaleTime,
          scaleTimeH,
          lineArr,
          selectArr
        );
      }
    }
  });
  drawSingleLine(context, w, h, scaleTime, scaleTimeH, lineArr, true);
}