P5.js：使用flexbox时如何防止文本被压扁

【问题标题】：P5.js: how to prevent text from being crushed when using flexboxP5.js：使用flexbox时如何防止文本被压扁
【发布时间】：2021-06-24 07:13:49
【问题描述】：

我正在尝试使用 p5.js 草图创建一个响应式网页。

在网页中，我使用 flexbox 切换了侧边栏。 但是一旦侧边栏出现在窗口的左侧，它就会在 p5.js 中粉碎我的画布（结果是画布中的所有图像/文本也会变形）。 为了让我的问题更容易理解，我在这里上传了一张图片和demo 非常感谢，非常感谢您的帮助。

/*When button clicked, show / hide the sidebar */
function toggle(){
  $('main').on('click', '.toggle-sidebar', function(){
    var sidebar = $('.sidebar');
       sidebar.toggleClass('is-visible');
       sidebar.toggle(300);
    })
};
toggle();


/*p5.js*/
const typo = (sketch) => {
  let x1 = 0;
  let x2;
  let speed = 3;
  /*Responsive canvas => make the canvas width equals to it's parent container*/
  let cvs_parent_width = document.getElementById("canvas").offsetWidth;
  let cvs_width = cvs_parent_width;
  /*Responsive font => font size is set based on canvas width */
  let ratio_responsive = 200 / 1500;
  
  sketch.setup = () => {
   let cvs = sketch.createCanvas(cvs_width, sketch.windowHeight);
    sketch.textFont("Palatino");
    cvs.style("display", "block");
  };

  sketch.draw = () => {
    sketch.background(220);
    x1 += speed;
    x2 += speed;
    if (x2 > 0) {
      x1 = x2 - cvs_width;
    }
    if (x1 > 0) {
      x2 = x1 - cvs_width;
    }

    let typo_size = cvs_width * ratio_responsive;
    sketch.textSize(typo_size);
    sketch.text("TYPO CRUSHED", x1, 30, cvs_width, sketch.windowHeight);
    sketch.text("TYPO CRUSHED", x2, 30, cvs_width, sketch.windowHeight);
  }
}

let typo_sketch = new p5(typo, "canvas");
html, body  {
  width: 100%;
  height: 100%;
  margin: 0;
}

main{
  overflow:hidden;
}

/* Flexbox for showing n hide sidebar*/
/* flex parent */
.flexgroup {
  display: flex;
  justify-content: flex-end;
}

/* flex item1 */
.sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  height: 100%;
  width:50vw;
}

/* flex item2 */
.image {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
  max-width:100%;
  transition: flex-basis .3s;
}

.none{
  display:none;
}

.sidebar.is-visible  ~ .image {
  flex-basis: 0;
  transition: flex-basis .3s;
}

/* parameters of canvas */
canvas{
  margin:auto;
  display:block;
  max-width: 100%; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
    
    <meta charset="utf-8" />

  </head>
  <body>
  <main>
  <!-- TOGGLE BUTTON-->
  <button class="toggle-sidebar">Toggle</button>

  <!-- FLEXBOX-->
  <div class='flexgroup'>
  <!-- FLEXBOX Item1-->
    <div class="sidebar none">
     <p>
        SIDEBAR
      </p>
    </div>
   
  <!-- FLEXBOX Item2-->
    <div class='image'>
      <div id="canvas">
  <!-- P5.JS-->    
      </div>
    </div>
  </div>
</main>
  </body>
</html>

【问题讨论】：

    标签： canvas flexbox responsive p5.js typography


    【解决方案1】：

    当由于布局更改而调整画布大小时，绘图上下文大小不会更新以反映这一点。您需要检测新尺寸并相应地更新画布尺寸。当使用全窗口画布或相对于窗口大小调整大小的画布时，这可以通过 p5.js windowResized 函数轻松完成。但是，因为您是根据特定元素的 flexbox 布局来调整画布的大小（动画不少于），所以事情会稍微复杂一些。如果您使用的是modern, mainstream web browser，那么您可以使用ResizeObserver。这是一个演示使用 ResizeObserver 解决问题的 sn-p：

    /*When button clicked, show / hide the sidebar */
function toggle(){
  $('main').on('click', '.toggle-sidebar', function(){
    var sidebar = $('.sidebar');
       sidebar.toggleClass('is-visible');
       sidebar.toggle(300);
    })
};
toggle();


/*p5.js*/
const typo = (sketch) => {
  let x1 = 0;
  let x2;
  let speed = 3;
  /*Responsive canvas => make the canvas width equals to it's parent container*/
  let cvs_parent_width = document.getElementById("canvas").offsetWidth;
  let cvs_width = cvs_parent_width;
  /*Responsive font => font size is set based on canvas width */
  let ratio_responsive = 200 / 1500;
  let cvs;
  
  sketch.setup = () => {
    cvs = sketch.createCanvas(cvs_width, sketch.windowHeight);
    sketch.textFont("Palatino");
    cvs.style("display", "block");
    new ResizeObserver(canvasParentResized).observe(cvs.parent());
  };
  
  let supressResize = false;
  function canvasParentResized() {
    if (!supressResize) {
      let parent = cvs.parent();
      if (parent && parent.offsetWidth) {
        // console.log('resized');
        supressResize = true;
        cvs_width = cvs_parent_width = parent.offsetWidth;
        sketch.resizeCanvas(cvs_parent_width, sketch.windowHeight);
      } else {
        console.log(parent.offsetWidth);
      }
    } else {
      // Resizing the canvas tiggers the ResizeObserver recursively
      // console.log('supressed');
      supressResize = false;
    }
  }

  sketch.draw = () => {
    sketch.background(220);
    x1 += speed;
    x2 += speed;
    if (x2 > 0) {
      x1 = x2 - cvs_width;
    }
    if (x1 > 0) {
      x2 = x1 - cvs_width;
    }

    let typo_size = cvs_width * ratio_responsive;
    sketch.textSize(typo_size);
    sketch.text("TYPO CRUSHED", x1, 30, cvs_width, sketch.windowHeight);
    sketch.text("TYPO CRUSHED", x2, 30, cvs_width, sketch.windowHeight);
  }
}

let typo_sketch = new p5(typo, "canvas");
    html, body  {
  width: 100%;
  height: 100%;
  margin: 0;
}

main{
  overflow:hidden;
}

/* Flexbox for showing n hide sidebar*/
/* flex parent */
.flexgroup {
  display: flex;
  justify-content: flex-end;
}

/* flex item1 */
.sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  height: 100%;
  width:50vw;
}

/* flex item2 */
.image {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
  max-width:100%;
  transition: flex-basis .3s;
}

.none{
  display:none;
}

.sidebar.is-visible  ~ .image {
  flex-basis: 0;
  transition: flex-basis .3s;
}

/* parameters of canvas */
canvas{
  margin:auto;
  display:block;
  max-width: 100%; 
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
    
    <meta charset="utf-8" />

  </head>
  <body>
  <main>
  <!-- TOGGLE BUTTON-->
  <button class="toggle-sidebar">Toggle</button>

  <!-- FLEXBOX-->
  <div class='flexgroup'>
  <!-- FLEXBOX Item1-->
    <div class="sidebar none">
     <p>
        SIDEBAR
      </p>
    </div>
   
  <!-- FLEXBOX Item2-->
    <div class='image'>
      <div id="canvas">
  <!-- P5.JS-->    
      </div>
    </div>
  </div>
</main>
  </body>
</html>

    【讨论】：

    • 是的，当容器改变大小时，我没有想到对父容器使用调整大小功能。非常感谢您的详细和建设性的解释！这帮助很大。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-08
    • 2018-06-08
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode