【问题标题】:How to get real line width from 2D geometry?如何从二维几何中获得真实的线宽?
【发布时间】:2022-06-14 10:17:33
【问题描述】:

如何从 2D 图纸中获取线宽以创建具有正确宽度或相对原始线宽的自定义线。

VertexBufferReader 返回的是没有线宽的两点。

【问题讨论】:

    标签: three.js autodesk-forge autodesk-viewer


    【解决方案1】:

    你在找这个吗?

    • onLineSegment(x1, y1, x2, y2, vpId, lineWidth) 在函数参数的末尾有一个lineWidth 参数

    • onTexQuad(centerX, centerY, width, height, rotation, vpId) 在函数参数中有一个width 参数

    快照:

    演示代码:

    function GeometryCallback(viewer,copiedGeometryName,curveMaterial) {
    
      this.viewer = viewer;   
      this.opiedGeometryName = copiedGeometryName;
    
      // linewidth does not take effect in Chrome and Firefox 
      // It is a known issue with OpenGL core
      // try with Safari
      this.curveMaterial = curveMaterial;
      this.is2PITimes = function(angle1,angle2){
        return Math.abs(angle1-angle2)/Math.PI % 2 == 0
      }
    
    }
    
    GeometryCallback.prototype.onLineSegment = function(x1, y1, x2, y2, vpId, lineWidth) {
    
      var vpXform = this.viewer.model.getPageToModelTransform(vpId);
      //if in CAD coordinate system, applyMatrix4 with vpXform
      var pt1 = new THREE.Vector3().set(x1, y1, 0)//.applyMatrix4(vpXform);
      var pt2 = new THREE.Vector3().set(x2, y2, 0)//.applyMatrix4(vpXform); 
    
      console.log('Line segment vertices coordinates: ', {
            pointX1: pt1.x,
            pointY1: pt1.y,
            pointX2: pt2.x,
            pointY2: pt2.y
        },
        'width:', lineWidth
      ); 
      
      //add overlay geometry 
      var geometry = new THREE.Geometry () 
      geometry.vertices.push (new THREE.Vector3 ( pt1.x,  pt1.y, 0))
      geometry.vertices.push (new THREE.Vector3 ( pt2.x,  pt2.y, 0))
    
      var lines = new THREE.Line (geometry,
                                  this.curveMaterial,
                                  THREE.LinePieces)
      this.viewer.impl.addOverlay (this.opiedGeometryName, lines) 
      this.viewer.impl.invalidate (false,false,true)   
    }
    
    GeometryCallback.prototype.onCircularArc = function(cx, cy, start, end, radius, vpId) {
    
      var vpXform = this.viewer.model.getPageToModelTransform(vpId);
      //if in CAD coordinate system, applyMatrix4 with vpXform
      var center = new THREE.Vector3().set(cx, cy, 0)//.applyMatrix4(vpXform);
    
      console.log('CircleArc segment: ', {
        centerX: center.x,
        centerY: center.y,
        radius: radius,
        startAngle: start,
        endAngle: end
      }); 
    
      //add overlay geometry
      var curve = new THREE.EllipseCurve(
        center.x, center.y,            
        radius, radius,     
        start, end,  
        false            
      );
      var path = new THREE.Path(curve.getPoints(50));
      var geometry = path.createPointsGeometry(50);
      //remove last vertex if it an arc
      if(!this.is2PITimes(start,end))
        geometry.vertices.pop();
      var circularArc = new THREE.Line(geometry, this.curveMaterial);
      this.viewer.impl.addOverlay (this.opiedGeometryName, circularArc) 
      this.viewer.impl.invalidate (false,false,true)  
    };
    
    GeometryCallback.prototype.onEllipticalArc = function(cx, cy, start, end, major, minor, tilt, vpId) {
      var vpXform = this.viewer.model.getPageToModelTransform(vpId);
      //if in CAD coordinate system, applyMatrix4 with vpXform
      var center = new THREE.Vector3().set(cx, cy, 0)//.applyMatrix4(vpXform);
    
      console.log('EllipticalArc segment: ', {
        centerX: center.x,
        centerY: center.y,
        radius: radius,
        startAngle: start,
        endAngle: end
      }); 
    
      //add overlay geometry
      var curve = new THREE.EllipseCurve(
        center.x, center.y,            
        major, minor,     
        start, end,  
        false            
      );
      var path = new THREE.Path(curve.getPoints(50));
      var geometry = path.createPointsGeometry(50);
      //remove last vertex if it an arc
      if(!this.is2PITimes(start,end))
        geometry.vertices.pop();
      var ellipticalArc = new THREE.Line(geometry, this.curveMaterial);
      this.viewer.impl.addOverlay (this.opiedGeometryName, ellipticalArc) 
      this.viewer.impl.invalidate (false,false,true)  
    };
    GeometryCallback.prototype.onOneTriangle = function(x1, y1, x2, y2, x3, y3, vpId){
      //Similar logic as above
    };
    GeometryCallback.prototype.onTexQuad = function(centerX, centerY, width, height, rotation, vpId){
      //from VertexBufferReader.js:
      //Currently this case does not actually come up
    };
    
    //extension of MyShow2dCurve
    function MyShow2dCurve(viewer, options) {
    
        Autodesk.Viewing.Extension.call(this, viewer, options)
    
        var _viewer = this.viewer 
        var _copiedGeometryName = 'copiedGeometryName'
    
        // linewidth does not take effect in Chrome and Firefox 
        // It is a known issue with OpenGL core
        // try with Safari
        var _curveMaterial = new THREE.LineBasicMaterial ({
          color: new THREE.Color (0xFF0000),
          transparent: true,
          depthWrite: false,
          depthTest: false,
          linewidth: 5,
          opacity: 1.0
          }) 
    
        //when extension is loaded
        this.load = function() {
            console.log('MyShow2dCurve is loaded!'); 
            //bind keyup event
            $(document).bind('keyup', onKeyUp); 
            _viewer.impl.invalidate(true);  
            return true;
        };
    
        //when extension is unloaded 
        this.unload = function() {
            console.log('MyShow2dCurve is now unloaded!');
            //unbind keyup event
            $(document).unbind('keyup', this.onKeyUp);
            return true;
        }; 
    
        //when key up
        function onKeyUp(evt) {  
            console.log('onKeyUp:' + evt.keyCode); 
      
            //when key 'S' is pressed
            if(evt.keyCode == 83){   
              //create overlay
              _viewer.impl.createOverlayScene (_copiedGeometryName, _curveMaterial)   
               //start to monitor select event 
              _viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelectObj) 
            }
          
            //when key 'Q' is pressed
            if(evt.keyCode == 81){ 
              //undelegate selection event
              _viewer.removeEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelectObj) 
              //remove overlay
              _viewer.impl.removeOverlayScene(_copiedGeometryName);
              _viewer.impl.invalidate(false, false, true);  
              }
          
            return true;
          } 
    
          //when selecting object
          function onSelectObj(evt){ 
                console.log(evt) 
                //selected object id
                var dbId = evt.dbIdArray[0] 
                //get instance tree
                var it = _viewer.model.getData().instanceTree;
                //dump fragments of the object
                it.enumNodeFragments( dbId, function( fragId ) {
                    //get each fragment
                    var m = _viewer.impl.getRenderProxy(_viewer.model, fragId);
                    //initialize VertexBufferReader
                    var vbr = new Autodesk.Viewing.Private.VertexBufferReader(m.geometry, _viewer.impl.use2dInstancing);
                    //dump geometry of this fragment
                    vbr.enumGeomsForObject(dbId, new GeometryCallback(_viewer,_copiedGeometryName, _curveMaterial));
                }); 
          }    
    }
    
    MyShow2dCurve.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
    MyShow2dCurve.prototype.varructor = MyShow2dCurve; 
      
    Autodesk.Viewing.theExtensionManager.registerExtension('MyShow2dCurve', MyShow2dCurve); 
    

    修改自:https://forge.autodesk.com/blog/dump-geometries-2d-curve

    【讨论】:

      猜你喜欢
      • 2021-07-14
      • 2016-05-11
      • 2014-04-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-09
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多