ТРИ МЕТАЛИНА, ПОСТОЯННАЯ Ширина - PullRequest
Новая
       5

ТРИ МЕТАЛИНА, ПОСТОЯННАЯ Ширина

0 голосов
/ 10 марта 2020

Я использую комбинацию THREE.Shape и THREE.Meshline для рисования скругленного прямоугольника под влиянием https://github.com/etiennepinchon/aframe-rounded

inconsistent width

К сожалению, я не могу получить длинные строки одинаковой ширины (даже если для стайлера ширины установлено значение по умолчанию или единица)

Вот как я рисую форму: 

  var roundedRectShape = new THREE.Shape();
  function roundedRect( ctx, x, y, width, height, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius ) {
    if (!topLeftRadius) { topLeftRadius = 0.00001; }
    if (!topRightRadius) { topRightRadius = 0.00001; }
    if (!bottomLeftRadius) { bottomLeftRadius = 0.00001; }
    if (!bottomRightRadius) { bottomRightRadius = 0.00001; }
    ctx.moveTo( x, y + topLeftRadius );
    ctx.lineTo( x, y + height - topLeftRadius );
    ctx.quadraticCurveTo( x, y + height, x + topLeftRadius, y + height );
    ctx.lineTo( x + width - topRightRadius, y + height );
    ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - topRightRadius );
    ctx.lineTo( x + width, y + bottomRightRadius );
    ctx.quadraticCurveTo( x + width, y, x + width - bottomRightRadius, y );
    ctx.lineTo( x + bottomLeftRadius, y );
    ctx.quadraticCurveTo( x, y, x, y + bottomLeftRadius );
  }

  var corners = [this.data.radius, this.data.radius, this.data.radius, this.data.radius];
  if (this.data.topLeftRadius != -1) { corners[0] = this.data.topLeftRadius; }
  if (this.data.topRightRadius != -1) { corners[1] = this.data.topRightRadius; }
  if (this.data.bottomLeftRadius != -1) { corners[2] = this.data.bottomLeftRadius; }
  if (this.data.bottomRightRadius != -1) { corners[3] = this.data.bottomRightRadius; }

  roundedRect( roundedRectShape, 0, 0, this.data.width, this.data.height, corners[0], corners[1], corners[2], corners[3] );

  if(this.data.lineWidth > 0){
    //@ts-ignore
    const line = new THREE.MeshLine()
    var geometry = new THREE.Geometry()
    roundedRectShape.getPoints().forEach(point => geometry.vertices.push(new THREE.Vector3(point.x, point.y, 0)))
    var widthFn = new Function ('p', 'return ' + this.data.lineWidthStyler)
    line.setGeometry( geometry)
    return line.geometry
  }

И применить материал 

    this.resolution = new AFRAME.THREE.Vector2 ( window.innerWidth  / this.camera.zoom, window.innerHeight /this.camera.zoom ) 
       //@ts-ignore
      this.rounded.material = new THREE.MeshLineMaterial({
        color: new AFRAME.THREE.Color(this.data.color),
        resolution: this.resolution,
        sizeAttenuation: false,
        lineWidth: this.data.lineWidth,
        opacity: this.data.opacity,
        transparent: true,
        // near: 0.1,
        // far: 1000
      })

Есть идеи, как сделать так, чтобы ширина линии с левой стороны была последовательной?

...