Question

我正在用Zdog制作3D盒子，我想让盒子的高度增加。这是一个代码笔：https://codepen.io/anon/pen/qzBMgp。

这是我在盒子上的代码：

    private static FooBar GetSettings(string appCfgPath)
    {
        var configFileMap = new ExeConfigurationFileMap();
        configFileMap.ExeConfigFilename = appCfgPath;
        var cfg = ConfigurationManager.OpenMappedExeConfiguration(configFileMap, ConfigurationUserLevel.None);
        var sectionGroup = cfg .GetSectionGroup("userSettings");
        var section = (ClientSettingsSection) sectionGroup.Sections["MyNamespace.FooBar"];

        return (FooBar) section; //will not work. How to convert one to another?
    }

这是我用来增加盒子高度的代码。如果框短于let progressBox = new Zdog.Box({ addTo: progress, width: 200, height: boxHeight, depth: 200, stroke: 1, })，则框的高度将增加400。

0.1

问题是盒子保持在function animate() { if (boxHeight < 400) { moveUp = 'up'; } else if (boxHeight > 400) { moveUp = 'false'; } boxHeight += moveUp == 'up' ? 0.1 : 0; }的高度（我给boxHeight赋予的值），但是当我0时console.log(boxHeight)会增长。

Answer 1

首先，让我指出，您不能更改常数的值。在您的代码上，boxHeight被声明为const。

第二，您将需要使用Zdog的copy()方法。这是您的代码进行了相应的修改。

Zdog.Anchor.prototype.renderGraphSvg = function (svg) {
  if (!svg) {
    throw new Error('svg is ' + svg + '. ' +
      'SVG required for render. Check .renderGraphSvg( svg ).');
  }
  this.flatGraph.forEach(function (item) {
    item.render(svg, Zdog.SvgRenderer);
  });
};

const TAU = Zdog.TAU;
const light = '#EAE2B7';
const yellow1 = '#FCBF49';
const orange1 = '#F77F00';
const red1 = '#d62828';
const purple1 = '#003049';
const white1 = '#ffffff';
const isSpinning = true;
var boxHeight = 0;


let progress = new Zdog.Illustration({
  element: '.progress',
  dragRotate: true,
  translate: {
    y: 25
  },
  rotate: {
    x: -0.4, y: 0.75
  }
});

let progressBox = new Zdog.Box({
  addTo: progress,
  width: 200,
  depth: 200,
  height: boxHeight,
  stroke: 1,
  color: purple1, // default face color
  leftFace: yellow1,
  rightFace: orange1,
  topFace: red1,
  bottomFace: light,
  translate: {
    x: 0,
    y: 300
  },
});



function animate() {

  if (boxHeight <= 400) {
    boxHeight++; // 1

    progressBox = progressBox.copy({
      height: boxHeight, // overwrite height
      translate: {
          y: progressBox.translate.y - 1 // overwrite vertical position to put box in place while height is growing.
      }
    });
  }


  progress.updateRenderGraph();
  requestAnimationFrame(animate);

}

animate();

我分叉了您的笔，并用上面的代码对其进行了更新。参见Zdog - progress box

请注意，在每个动画帧上执行copy()方法似乎很昂贵。我也是这个库的新手，这是目前我所知道的修复程序。

盒子的高度不会增加

1 个答案: