CAD/js/main.js

$(function() {
  init();
});

function init() {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

  var w = canvas.width;
  var h = canvas.height;
  context.translate(w/2,h/2);

  // 选择线段的roomId和line
  var _selectLineArr = []
  var _selectLine = [];
  var _selectVector = [];
  var _verticalLine = []
  var inFaceArr = []
  var intersectArr =[]
  var isDrag = false;
  var isDivide = false;
  var isFirst = true

  var firstStack = []
  // f_cube = rawToCube(calculateRawData(rawData),w,h)
  f_cube = rawToCube(raw_cube,w,h)
 
  draw(context, w, h);
  $('#divide').click(function (e) {
    if (isDivide) {
      isDivide = false
    $('#divide').removeClass('active')    
    }else{
      isDivide = true
    $('#divide').addClass('active')
    }
  })
  $("#myCanvas").mousedown(function(e) {
    
    var current = calculateXY([e.offsetX, e.offsetY],w,h);
    f_cubeLine = changeData(f_cube)
    _selectLineArr = selectLine(current, f_cubeLine, w, h)
    _selectLine = _selectLineArr.length>0?_selectLineArr[0]:[];
    _selectVector = _selectLine.length !== 0 ? [
      _selectLine["_3d_point2"]["data"][0] -
        _selectLine["_3d_point1"]["data"][0],
      _selectLine["_3d_point2"]["data"][1] -
        _selectLine["_3d_point1"]["data"][1]
    ]:[];
    

    _verticalLine = verticalLine(_selectVector)
    if (_selectLine.length !== 0) {
      drawSelectLine(context, _selectLine, w, h);
      isDrag = true;
    } else {
      draw(context, w, h);
    }

    // var current = [e.offsetX/w, e.offsetY/h];
   
  });
  $("#myCanvas").mouseup(function(e) {
    isDrag = false;
    if (_selectLine.length !== 0) {
      // console.log(intersect(f_cubeLine));
      if (firstStack.length>0) {
        f_cube = _getWhichPoint(...firstStack)[1];
        f_cubeLine = changeData(f_cube)
        // inFaceArr = cubePointInFace(_selectLineArr[1],f_cube,f_cubeLine)
        // pushInNewCube(inFaceArr,intersectArr,f_cube)
      }
    draw(context, w, h);
    }
    // draw(context, w, h);
  });
  $("#myCanvas").mousemove(function(e) {
    
    if (isDrag) {
      var current = calculateXY([e.offsetX, e.offsetY],w,h);
      // f_cubeLine = _getWhichPoint(_selectLine, current,_verticalLine, f_cubeLine, f_cube)[0];
      // f_cube = _getWhichPoint(_selectLine, current,_verticalLine, f_cubeLine, f_cube)[1];
      // draw(canvas, w, h);
      // drawSelectLine(canvas, _selectLine, w, h);
      // getPointFromLine(f_cubeLine)
      // var current = [e.offsetX, e.offsetY];
      if (isFirst) {
        firstStack = [_selectLine, current,_verticalLine, f_cubeLine, f_cube,w,h]
        isFirst = false
        return
      }
      f_cube = _getWhichPoint(_selectLine, current,_verticalLine, f_cubeLine, f_cube,w,h)[1];
      intersectArr = intersect(_selectLineArr[1],f_cubeLine)
      // console.log('====================================');
      // console.log(intersectArr);
      // console.log('====================================');
      // if (Math.abs(current[0]-lastX)>50&&lastX) {
      //   return
      // }
      if (!pointInSelectFace(_selectLineArr[1],f_cube) || intersectArr.length>0) {
        return
      }
      
      drawXX(_selectLine, current,_verticalLine, f_cubeLine, f_cube,w,h)

      firstStack = [_selectLine, current,_verticalLine, f_cubeLine, f_cube,w,h]
      function drawXX(_selectLine, current,_verticalLine, f_cubeLine, f_cube,w,h) {
        f_cube = _getWhichPoint(_selectLine, current,_verticalLine, f_cubeLine, f_cube,w,h)[1];
        draw(context, w, h);
        drawSelectLine(context, _selectLine, w, h);
      }
    }
    
  });
}

function draw(context, w, h) {
    context.clearRect(-w/2, -h/2, w, h);
    var temp;
    var cam_pos = []
    for (let i = 0; i < f_cube.length; i++) {
      temp = [];
      for (let j = 0; j < f_cube[i].points.length; j++) {
        temp.push(f_cube[i].points[j]["data"]);
      }
      cam_pos = f_cube[i].campos?f_cube[i].campos:[]
      circularLine(temp, context, "#ff0000",cam_pos, w, h, false);
    }
}

function drawSelectLine(context, selectLine, w, h) {
    // var context = canvas.getContext("2d");
    var temps = [];
    temps.push(selectLine["_3d_point1"]["data"]);
    temps.push(selectLine["_3d_point2"]["data"]);
    
    circularLine(temps, context, "#0000ff",[], w, h, false);
}