Canvas呈現(xiàn)3D業(yè)務(wù)邏輯關(guān)系

Alliot 發(fā)布于2019-08-20 15:21 / 720人閱讀

摘要：導(dǎo)言引擎那么火，你讓怎么辦閑來無事，用實(shí)現(xiàn)效果的業(yè)務(wù)關(guān)系，是否也是一種樂趣先睹為快實(shí)驗(yàn)天地能繪制效果，的繪圖就不能了嗎其實(shí)不然，也能繪制，只是消耗的都是內(nèi)存，繪制效率自然收到影響但若場景不大，效果不太真，也不妨試試?yán)L制

導(dǎo)言

3D引擎那么火，你讓2D怎么辦？ 閑來無事，用Canvas實(shí)現(xiàn)3D效果的業(yè)務(wù)關(guān)系，是否也是一種樂趣？

先睹為快

實(shí)驗(yàn)天地

WebGL能繪制3D效果，Canvas的2D繪圖就不能了嗎？其實(shí)不然，也能繪制，只是消耗的都是內(nèi)存，繪制效率自然收到影響；但若場景不大，3D效果不太真，也不妨試試；

Canvas繪制3D Cube

3D cube HTML5 canvas realization

3D cube HTML5 canvas realization on 2D contex

Features:

3D operations: rotating, moving object center
Direct illumination
Highlighting edges
Optimizations:
- Skip outputting of invisible polygons
- Skip processing of duplicated points

效果

封裝一��(gè)Cube模塊

CNode = function(id) {
  CNode.superClass.constructor.call(this, id);
}

twaver.Util.ext("CNode", twaver.Node, {
  _split:1/3,
  _cubeAngle:Math.PI/6,
  getVectorUIClass: function (){
    return CNodeUI;
  },
  setSplit:function(split){
    this._split = split;
  },
  setCubeAngle:function(angle){
    this._cubeAngle = angle;
  }
});

CNodeUI = function(network, element) {
  CNodeUI.superClass.constructor.call(this, network, element);
}

twaver.Util.ext("CNodeUI", twaver.vector.NodeUI, {
  drawVectorBody : function(ctx) {
      // CNodeUI.superClass.drawVectorBody.call(this, ctx);
      var node = this._element;
      var rect = this.getZoomBodyRect();
      // rect.x = rect.x + rect.width /4;
      // rect.y = rect.y + rect.height /4;
      // rect.width /= 2;
      // rect.height /= 2;
      var angleSin = Math.sin(node._cubeAngle);
      var angleCos = Math.cos(node._cubeAngle);
      var angleTan = Math.tan(node._cubeAngle);
      var split = node._split;
      var dash = false;
      var fill = false;
      var fillColor = this.getStyle("vector.fill.color");
      var close = false;

      var cubeDepth = node._width * split/angleCos;
      var cubeWidth = node._width * (1 - split) / angleCos;
      // var cubeHeight = rect.height/3;
      var cubeHeight = rect.height - cubeWidth * angleSin - cubeDepth * angleSin;
      var angle = node.getClient("angle");

      var center = {x:rect.x + rect.width/2,y:rect.y + rect.height/2};
      var p1 = {},p2 = {}, p3 = {}, p4 = {}, p5 = {},p6 = {}, p7 = {}, p8 = {};
      p1.x = rect.x + rect.width * split;
      p1.y = rect.y + rect.height;

      p2.x = rect.x;
      p2.y = rect.y + rect.height - cubeDepth * angleSin;

      p3.x = p2.x;
      p3.y = p2.y - cubeHeight;

      p4.x = p1.x;
      p4.y = p1.y - cubeHeight ;

      p6.x = rect.x + rect.width;
      p6.y = rect.y + rect.height - cubeWidth * angleSin;

      p5.x = p6.x;
      p5.y = p6.y - cubeHeight;

      p7.x = rect.x + rect.width * (1 - split);
      p7.y = rect.y;

      p8.x = p7.x;
      p8.y = p7.y + cubeHeight;

      p1 = this.rotatePoint(center,p1,angle * Math.PI / 180);
      p2 = this.rotatePoint(center,p2,angle * Math.PI / 180);
      p3 = this.rotatePoint(center,p3,angle * Math.PI / 180);
      p4 = this.rotatePoint(center,p4,angle * Math.PI / 180);
      p5 = this.rotatePoint(center,p5,angle * Math.PI / 180);
      p6 = this.rotatePoint(center,p6,angle * Math.PI / 180);
      p7 = this.rotatePoint(center,p7,angle * Math.PI / 180);
      p8 = this.rotatePoint(center,p8,angle * Math.PI / 180);


      close = false;
      dash = true;
      fill = false;
      this.drawPoints(ctx,[p2,p8],close,dash,fill);
      this.drawPoints(ctx,[p7,p8],close,dash,fill);
      this.drawPoints(ctx,[p6,p8],close,dash,fill);

      dash = false;
      close = true;
      fill = true;
      this.drawPoints(ctx,[p1,p2,p3,p4],close,dash,fill,fillColor);
      this.drawPoints(ctx,[p1,p4,p5,p6],close,dash,fill);
      this.drawPoints(ctx,[p3,p4,p5,p7],close,dash,fill);
    },
    drawPoints:function(ctx,points,close,dash,fill,fillColor){
      if(!points || points.length == 0){
        return;
      }
      ctx.beginPath();
      ctx.strokeStyle = "black";
      ctx.lineWidth = 0.5;
      if(fill && fillColor) {
        ctx.fillStyle = fillColor.colorRgb(0.6);
      }
      if(dash){
        ctx.setLineDash([8,8]);
        ctx.strokeStyle = "rgba(0,0,0,0.5)";
      }else{
        ctx.setLineDash([1,0]);
      }
      ctx.moveTo(points[0].x,points[0].y);

      for(var i = 1;i < points.length; i++){
        var p = points[i];
        ctx.lineTo(p.x,p.y);
      }

      if(close){
        ctx.lineTo(points[0].x,points[0].y);
      }

      ctx.closePath();
      ctx.stroke();
      if(fill){
        ctx.fill();
      }
    },
    rotatePoint:function(center,p,angle) {
      var x = (p.x - center.x) * Math.cos(angle) - (p.y - center.y) * Math.sin(angle) + center.x;
      var y = (p.x - center.x) * Math.sin(angle) + (p.y - center.y) * Math.cos(angle) + center.y;
      return {x:x, y:y};
    },
  });

就是把小��(xué)初中所��(xué)的幾何知��(shí)用上就可以了��

再封裝一��(gè)傾斜平面

var CGroup = function(id){
      CGroup.superClass.constructor.apply(this, arguments);
      this.enlarged = false;
    };

    twaver.Util.ext(CGroup, twaver.Group, {
      _tiltAngle:45,
      getTiltAngleX : function() {
        return this._tiltAngle;
      },
      setTiltAngleX : function(angle) {
        var oldValue = this._tiltAngle;
        this._tiltAngle = angle % 360;
        this.firePropertyChange("tiltAngleX", oldValue, this._tiltAngle);
      },
      getVectorUIClass:function(){
        return CGroupUI;
      },
      isEnlarged:function() {
        return this.enlarged;
      },
      setEnlarged:function(value){
        this.enlarged = value;
        var fillColor;
        if(value === false){
          this.setClient("group.angle",this._tiltAngle);
          this.setClient("group.shape","parallelogram");
          this.setClient("group.deep",10);
          this.setStyle("select.style","none");
          // this.setStyle("group.gradient","linear.northeast");
          this.setStyle("group.gradient","radial.center");
          this.setStyle("group.deep",0);
          this.setStyle("label.position","right.left");
          this.setStyle("label.xoffset",-10);
          this.setStyle("label.yoffset",-30);
          this.setStyle("label.font","italic bold 12px/30px arial,sans-serif");
          fillColor = this.changeHalfOpacity(this.getStyle("group.fill.color"));
          this.setStyle("group.fill.color",fillColor);
          this.setAngle(-20);
        }else{
         this.setAngle(0);
         this.setClient("group.angle",1);
         this.setClient("group.shape","parallelogram");
         this.setClient("group.deep",0);

         this.setStyle("select.style","none");
         this.setStyle("group.gradient","linear.northeast");
         this.setStyle("group.deep",0);
         this.setStyle("label.position","right.right");
         this.setStyle("label.xoffset",0);
         this.setStyle("label.yoffset",0);
         this.setStyle("label.font","italic bold 12px/30px arial,sans-serif");

         fillColor = this.changeOpacity(this.getStyle("group.fill.color"));
         this.setStyle("group.fill.color",fillColor);
       }
     },

     increaseOpacity:function(rgba){
      if(typeof rgba === "string" && rgba.indexOf("rgba(") !== -1 && rgba.indexOf(")") !== -1){
        var rgbaSub = rgba.substring(5, rgba.length-1);
        var rgbaNums = rgbaSub.split(",");
        var returnColor ="rgba(";
        var i;
        for(i=0;i

參考文��(xiàn)
[1].canvas��(shí)��(xiàn)簡單3D旋轉(zhuǎn)效果

GPU云服��(wù)�� 云服��(wù)�� 邏輯��(guān)�� html邏輯��(guān)系符 ��(yè)��(wù)邏輯 ��(yè)��(wù)邏輯��

文章版權(quán)歸作者所有，未經(jīng)允許請勿��(zhuǎn)��,若此文章存在違規(guī)行為，您可以��(lián)系管理員刪除��

��(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82182.html

��(fā)表評(píng)��

登陸后可��(píng)��

0條評(píng)��

Alliot

��|高級(jí)講師

我要��(guān)�� 我要私信

TA的文��

虛擬主機(jī)如何��(shí)��(xiàn)php偽靜��(tài)��(shè)��-如何配置虛擬主機(jī)��

閱讀 3425·2021-09-22 16:00
10gbiz：香��/洛杉磯CN2 GIA線路VPS四折$2.36/月起,香港/日本��(dú)立服��(wù)器首��1.

閱讀 3468·2021-09-07 10:26
margin合并、塌陷，清除浮動(dòng)

閱讀 3029·2019-08-30 15:55
我的全棧工程師之旅（一��

閱讀 2869·2019-08-30 13:48
json和xml的區(qū)��

閱讀 1376·2019-08-30 12:58
IphoneX底部適配

閱讀 2178·2019-08-30 11:15
使用html2canvas.js��(shí)��(xiàn)功能中遇到的一些問��

閱讀 958·2019-08-30 11:08
rem兩三��

閱讀 534·2019-08-29 18:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Canvas呈現(xiàn)3D業(yè)務(wù)邏輯關(guān)系

3D cube HTML5 canvas realization on 2D contex

相關(guān)文章

打造最美HTML5 3D��(jī)房（第二季）

打造最美HTML5 3D��(jī)房（第二季）

��(fā)表評(píng)��

0條評(píng)��

Alliot

��|高級(jí)講師

TA的文��

虛擬主機(jī)如何��(shí)��(xiàn)php偽靜��(tài)��(shè)��-如何配置虛擬主機(jī)��

10gbiz：香��/洛杉磯CN2 GIA線路VPS四折$2.36/月起,香港/日本��(dú)立服��(wù)器首��1.

margin合并、塌陷，清除浮動(dòng)

我的全棧工程師之旅（一��

json和xml的區(qū)��

IphoneX底部適配

使用html2canvas.js��(shí)��(xiàn)功能中遇到的一些問��

rem兩三��

最新活��(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Canvas呈現(xiàn)3D業(yè)務(wù)邏輯關(guān)系

3D cube HTML5 canvas realization on 2D contex

相關(guān)文章

��(fā)表評(píng)��

0條評(píng)��

��|高級(jí)講師

TA的文��

最新活��(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！