front_end/js/index.js

var TESTREFRESH = 0;

//var circleStyle = {fillColor:"blue", fill:true, stroke:true, fillOpacity:1, strokeOpacity:1};
var div = document.getElementById("container2d");
var width = window.outerWidth - 260;
var height = window.outerHeight;
// 放个均分多少份
var stepx = 50;
var stepy = 50;
var backgroundSize = 50;
var startx = -stepx * backgroundSize;
var starty = -stepx * backgroundSize;
var MixZoom = 20;

var MixMark = -1;
var MaxMark = 139;
var startMarkX = -width / 2 + 150;
var startMarkY = -height / 2 + 150;


var wallleftX = -500;
var wallleftY = 400;
var wallrightX = 500;
var wallrightY = -400;

var wallThickness = 30;
var partitionThickness = 15;

var door = 80;
var window = 50;

var meter = width / 20;
var meterpositionX = 100;

var redrawCount = 0;
// canvas最大正方形宽高
var backgroundcanvasMax = 5000;
var Sector_r = 70;
var slid_r = 10;
var point_r = 5;

var sysmbolCircleR = 10;
var symbolMinLen = 10;
var show3D = false;
var three3D;
var center;
var my3DEngine = null;

var wallId = null;
var Overlay;
var vectors = [];
var layer;

var initMesh = 0;
var one2d = false;
var one3d = false;

var TESTCOUNT = 0;

function init() {
  layer = new Layer(width, height);
  layer.renderer.drawBackGround();

  wallThickness = layer.parameter.wallThickness;
  partitionThickness = layer.parameter.partitionThickness;

  door = 80;
  window = 50;


  addWall();
  //layer.addSymbol2D.wallIds.push(wallId);
  if (!one2d) {
    //initRoom();
    one2d = true;
  }

  initLoad();
}
init();


//document.getElementById("closeproduct").addEventListener("click",layer.menu.closeProduct);
window.onresize = function () {
  width = window.outerWidth - 260;
  height = window.outerHeight;
  startMarkX = -width / 2 + 50;
  startMarkY = -height / 2 + 50;

  layer.size = new CanvasSketch.Size(parseInt(width), parseInt(height));
  //layer.renderer.setSize(layer.size);
  layer.maxBounds = new CanvasSketch.Bounds(-layer.size.w / 2, -layer.size.h / 2, layer.size.w / 2, layer.size.h / 2);
  layer.bounds = new CanvasSketch.Bounds(-layer.size.w / 2, -layer.size.h / 2, layer.size.w / 2, layer.size.h / 2);
  //layer.renderer.redraw(0);
  //layer.renderer.drawBackGround();
  layer.control.refreshCanvas = true;
  layer.control.refreshBackgroundCanvas = true;
  layer.control.refreshSelectCanvas = true;
  layer.renderer.autoRedraw();
};


// 关于4维弹出框
document.getElementById("aboutWindow").addEventListener("click", function (e) {
  //console.log("aboutWindow");
  if (document.getElementById("aboutWindow").style.display == "block") {
    if (e.target.className == "window-close" || e.target.innerText == "关闭") {
      document.getElementById("aboutWindow").style.display = "none";
    }
  }

});


// 放大跟保存图片
document.getElementById("subMenuContainer").addEventListener("click", function (e) {
  if (e.target.parentElement.parentElement.id == "toolbarScreenshot") {
    var saveAsLocalImage = function (canvasid, type) {
      var canvas = document.getElementById(canvasid);
      // 图片导出为 png 格式
      var type = 'png';
      var imgData = canvas.toDataURL(type);

      // 加工image data，替换mime type
      imgData = imgData.replace(_fixType(type), 'image/octet-stream');
      // 下载后的图片名
      var filename = '4dage_' + (new Date()).getTime() + '.' + type;
      // download
      saveFile(imgData, filename);
    };

    /**
     * 获取mimeType
     * @param  {String} type the old mime-type
     * @return the new mime-type
     */
    var _fixType = function (type) {
      type = type.toLowerCase().replace(/jpg/i, 'jpeg');
      var r = type.match(/png|jpeg|bmp|gif/)[0];
      return 'image/' + r;
    };

    /**
     * 在本地进行文件保存
     * @param  {String} data     要保存到本地的图片数据
     * @param  {String} filename 文件名
     */
    var saveFile = function (data, filename) {
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;

      var event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
    };
    if (show3D) {
      BABYLON.Tools.CreateScreenshot(my3DEngine.scene3D.engine, my3DEngine.scene3D.camera, {
        width: my3DEngine.scene3D.canvas.width,
        height: my3DEngine.scene3D.canvas.height
      });
    } else {
      saveAsLocalImage("dynamiccanvas2d", "png");
    }
  } else if (e.target.parentElement.parentElement.id == "fullscreen-btn") {
    var element = document.documentElement;
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen ||
      element.msRequestFullScreen;

    if (requestMethod) {
      requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") {
      var wscript = new ActiveXObject("WScript.Shell");
      if (wscript !== null) {
        wscript.SendKeys("{F11}");
      }
    }
  } else if (e.target.parentElement.parentElement.id == "transparencyButton") {
    //alert("透明");
    if (e.target.src.indexOf("icon-transparency.png") > -1) {
      /*
      for(var i=0;i<my3DEngine.decorate3D.roomWallMeshes.length;++i)
      {
        if(my3DEngine.decorate3D.roomWallMeshes[i].name=="wall"||my3DEngine.decorate3D.roomWallMeshes[i].name=="walltop")   
        {
          my3DEngine.decorate3D.roomWallMeshes[i].visibility=0.1;
        }
      }
      */
      my3DEngine.decorate3D.transparentWall(0.05);
      e.target.src = e.target.src.replace("icon-transparency.png", "icon-opacity.png");
    } else if (e.target.src.indexOf("icon-opacity.png") > -1) {
      /*
      for(var i=0;i<my3DEngine.decorate3D.roomWallMeshes.length;++i)
      {
        if(my3DEngine.decorate3D.roomWallMeshes[i].name=="wall"||my3DEngine.decorate3D.roomWallMeshes[i].name=="walltop")
        {
          my3DEngine.decorate3D.roomWallMeshes[i].visibility=1;
        }
      }
      */
      my3DEngine.decorate3D.transparentWall(1);
      e.target.src = e.target.src.replace("icon-opacity.png", "icon-transparency.png");
    }

  } else if (e.target.parentElement.parentElement.id == "lock-icon") {
    //alert("锁");
    if (e.target.className == "fa fa-unlock") {
      my3DEngine.action3D.lock = true;
      e.target.className = "fa fa-lock";
    } else if (e.target.className == "fa fa-lock") {
      my3DEngine.action3D.lock = false;
      e.target.className = "fa fa-unlock";
    }
  }
});
// Grid..........................................................



// loadding 位置
function initLoad() {
  var div = document.getElementById("loaddiv");
  var img = document.getElementById("loadimg");

  var width = window.innerWidth;
  var height = window.innerHeight;

  var imgwidth = img.width;
  var imgheight = img.height;

  var ptwidth = (width - imgwidth) / 2 + "px";
  var ptheight = (height - imgheight) / 2 + "px";

  div.style.width = width + "px";
  div.style.height = height + "px";
  div.width = width;
  div.height = height;

  img.style.marginLeft = ptwidth;
  img.style.marginTop = ptheight;
}


// 3D部分选中图片加载模型
function showPicture() {
  if (my3DEngine == null) {
    my3DEngine = layer.layer3D;
    my3DEngine.initialize();
  }
  var src = this.id.replace("product", "") + ".babylon";
  layer.menu.closeProduct();
  my3DEngine.modelLoader.showPicture(src);
}

// 3D部分选中图片加载模型
function showPhoFrame() {
  if (my3DEngine == null) {
    my3DEngine = layer.layer3D;
    my3DEngine.initialize();
  }
  var src = this.id.replace("product", "") + ".obj";
  layer.menu.closeProduct();
  my3DEngine.modelLoader.showPhoFrame(src);
}

// 3D部分选中图片加载模型
function showProduct3D() {
  if (my3DEngine == null) {
    my3DEngine = new Symbol3D();
    my3DEngine.initialize();
  }
  var src;
  var src = this.id.replace("product", "") + ".babylon";
  layer.menu.closeProduct();
  my3DEngine.modelLoader.showProduct(src);
}


// 未知作用
// function drawGrid(stepx, stepy) {
//   console.log('???? ---')
//   layer.renderer.addGrid();
// }


// 一开始添加墙面  默认添加
function addWall() {
  var vectors = [];
  var points = [];
  var point1 = new Point(wallleftX, wallleftY);
  points.push(point1);

  var point2 = new Point(wallrightX, wallleftY);
  points.push(point2);

  var point3 = new Point(wallrightX, wallrightY);
  points.push(point3);

  var point4 = new Point(wallleftX, wallrightY);
  points.push(point4);


  var wall = new Wall(points, document.getElementById("imgWall"));
  var vector = new Vector(wall, wallStyle);

  wallId = vector.id;
  layer.data2d.wallIds.push(wallId);
  vectors.push(vector);
  layer.addVectors(vectors);


}

// 显示3D  效果  3D效果入口
function Show3DBase() {
  if (!show3D) {
    if (my3DEngine == null) {
      my3DEngine = layer.layer3D;
      my3DEngine.initialize();
    }

    //my3DEngine.clearSymbol();
    my3DEngine.decorate3D.deleteRoomMeshes();
    GetWallPoints(layer);
    if (!one3d) {
      //initRoom3D();
      one3d = true;
    }

    my3DEngine.scene3D.render();
  }
  show3D = true;
}


// 获取2维信息以供给3维使用
function GetWallPoints(layer) {
  var wallIds = layer.data2d.wallIds;
  var calculateLine = layer.calculateLine;
  for (var i = 0; i < wallIds.length; ++i) {
    var id = wallIds[i];

    var points = layer.vectors[id].geometry.points;

    var syms = [];


    for (var key in layer.vectors[id].symbol2Ds) {
      var symbol2d = layer.vectors[id].symbol2Ds[key];

      var line = calculateLine.createLine(symbol2d.geometry.point1, symbol2d.geometry.point2);
      var sym = {};

      if (line.a != 0) {
        sym.angle = Math.atan(line.a);
      } else if (line.hasOwnProperty('x')) {
        sym.angle = Math.PI / 2;
      } else if (line.hasOwnProperty('y')) {
        sym.angle = 0;
      }
      sym.point = {
        x: (symbol2d.geometry.point1.x + symbol2d.geometry.point2.x) / 2,
        y: (symbol2d.geometry.point1.y + symbol2d.geometry.point2.y) / 2
      };
      //sym.type=symbol2d.geoType;
      sym.id = id;
      sym.type = symbol2d.geometry.geoType;
      sym.len = BABYLON.Vector2.Distance(symbol2d.geometry.point1, symbol2d.geometry.point2);
      sym.index = Math.min(symbol2d.attributes.wallstartindex, symbol2d.attributes.wallendindex);
      syms.push(sym);
    }

    if (i == 0) {
      //var inout=calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.border1,layer.vectors[id].geometry.border2);  
      var inout = calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.wallInfo);
      var inline = inout.use;
      var outline = inout.build;
      var height = inout.height;
      //my3DEngine.decorate3D.drawFloor(layer.vectors[id].geometry.points,layer.vectors[id].geometry.floor);
      my3DEngine.decorate3D.drawFloor(id);
      my3DEngine.decorate3D.drawCloseWallSymbols(outline, inline, height, syms, layer.vectors[id].geometry.wallType, id,
        layer.vectors[id].geometry.floor);
    } else {
      if (layer.vectors[id].geometry.state == 0) {
        //var inout=calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.border1,layer.vectors[id].geometry.border2); 
        var inout = calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.wallInfo);
        var inline = inout.use;
        var outline = inout.build;
        var height = inout.height;
        //my3DEngine.decorate3D.drawFloor(layer.vectors[id].geometry.points,layer.vectors[id].geometry.floor);
        my3DEngine.decorate3D.drawFloor(id);

        if (calculateLine.isClockWise(outline) > 0) {
          outline.reverse();
          inline.reverse();
        }
        my3DEngine.decorate3D.drawCloseWallSymbols(outline, inline, height, syms, layer.vectors[id].geometry.wallType, id,
          layer.vectors[id].geometry.floor);
      } else {
        var clockpoints = [];

        //var floorpoints=calculateLine.outinwallside(points,layer.vectors[id].geometry.wallType);
        //var floorpoints=calculateLine.outinwallside(layer.vectors[id].geometry);
        var floorpoints = calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.wallInfo);
        var height = floorpoints.height;
        if (floorpoints.use.length == 2) {
          var temp1 = [];
          var temp2 = [];

          temp1[0] = floorpoints.use[0];
          temp1[1] = floorpoints.build[0];

          temp2[0] = floorpoints.use[1];
          temp2[1] = floorpoints.build[1];

          floorpoints.use = temp1;
          floorpoints.build = temp2;

          clockpoints.push(temp1[0]);
          clockpoints.push(temp1[1]);
          clockpoints.push(temp2[1]);
          clockpoints.push(temp2[0]);
        } else {
          //var line1= calculateLine.createLine(floorpoints.side1[0], floorpoints.side1[1]);
          //var line2= calculateLine.createLine(floorpoints.side1[floorpoints.side1.length-2], floorpoints.side1[floorpoints.side1.length-1]);

          for (var n = 0; n < floorpoints.use.length; ++n) {
            clockpoints.push(floorpoints.use[n]);
          }
          for (var n = floorpoints.build.length - 1; n > -1; --n) {
            clockpoints.push(floorpoints.build[n]);
          }
        }

        if (calculateLine.isClockWise(clockpoints) > 0) {
          floorpoints.use.reverse();
          floorpoints.build.reverse();
          height.reverse();
        }
        my3DEngine.decorate3D.drawOpenWallSymbols(floorpoints, height, syms, layer.vectors[id].geometry.wallType, id,
          layer.vectors[id].geometry.floor);

      }

    }
  }
  my3DEngine.decorate3D.hideFloors(parseInt(layer.selectFloor));
}