Quark-Renderer ---第四篇

最新推荐文章于 2024-09-01 13:33:34 发布

醉卧床头

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量102

点赞数 1

分类专栏： quark-renderer 文章标签： javascript node.js

本文链接：https://blog.csdn.net/qq_53259920/article/details/120801024

版权

本文深入剖析Quark-Renderer中的resize()和clear()方法。resize()方法根据传入的宽度和高度调整canvas实例的尺寸，而clear()方法用于清空画布，为重画提供便利。clear()方法涉及赋值操作、条件判断以及对canvas实例和隐藏canvas的处理，确保画面刷新与重画的高效进行。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

这次接着上次的js文件继续分析。在该js文件中还有两个方法没有介绍，一个是resize()方法，另一个是clear()方法。

对于resize()方法，传入的参数只有两个，一个是宽度width、一个是高度height，对于无法得到canvas实例的，直接返回。当存在canvasInstance的style时，则设置canvasInstance.style的width和height属性。然后将canvas Instance的width和height属性根据宽高和dpr计算得出最后的值。接着判断是否为hiddencanvas，如果不是则返回。如果是的话，则对hiddenCanvas的width、height进行计算，跟canvasInstance计算过程相同。最后判断dpr然后设置scale。

resize(width, height) {
    //Can NOT get canvas instance in Wechat mini-program.
    if (!this.canvasInstance) {
      return;
    }
    if (this.canvasInstance.style) {
      this.canvasInstance.style.width = width + 'px';
      this.canvasInstance.style.height = height + 'px';
    }
    this.canvasInstance.width = width * this.dpr;
    this.canvasInstance.height = height * this.dpr;

    if (!this.hiddenCanvas) {
      return;
    }
    this.hidden