当元素是 p5.js canvas 的一部分时停止调整视口大小

Question

我正在使用 p5.js (p5js.org) 构建视觉交互，包括 p5.dom.js 以便我可以在其中做一些 html 事情。

当 html 图像元素离开 p5.js canvas（这也是一个元素。

我曾尝试采用此处建议的解决方案 CSS- hide element off the right of the screen，包括将一个元素放置在另一个样式设置为 overflow:hidden 和 position:relative 的元素中，但无济于事——图像就消失了。

虽然 commenting/uncommenting 下面代码中的 pictureContainer.style("position", "relative"); 实际上 hide/show 图像，这让我想知道 p5js 和 html 样式之间是否存在某种冲突?!

我也尝试在 index.html 中设置父容器并在我的 p5 脚本中执行 var x = select("parent div #id in index.html"); picture.parent(x); 但我得到的结果与上面相同。

仅供参考，我正在使用 p5.dom.js 中的 createImg()，然后使用 .style 定位图像等，因为项目是运行在 phonegap shell 和我在 iOS.

上遇到 p5.js 方法 loadImage() 的问题

这是我的问题代码：

//time keeping
var timeKeeper;

//picture container
var pictureContainer;
//picture
var pictureLoaded;
var picture;

//display picture bool
var pictureDisplay;

//p5 canvas
var canvas;

function setup() {
  
  //create the p5 canvas element
  canvas = createCanvas(windowWidth, windowHeight);
  
  // canvas.style("zIndex", "-1") //changing this doesn't seem to help
  
  //container to hold picture and supposedly prevent it affecting the viewport
  pictureContainer = createDiv("test");
  pictureContainer.style("overflow", "hidden");
  pictureContainer.style("position", "relative");
  // pictureContainer.position(0,0); //this doesn't do anything differently to the line above except move the container to top left of window
  pictureContainer.style("width", "0");
  pictureContainer.style("zIndex", "999");
 
  //create image
  picture = createImg("http://images.clipartpanda.com/foam-clipart-1334260620683400173foam_finger.svg", "fingerTransparent")
  //make picture the child of pictureContainer
  picture.parent(pictureContainer); //comment this and you'll see the picture appear, resizing the viewport every time it does.
  
  //position(x,y) sets the image position styling to position:absolute, left:x, top:y -- as such:http://p5js.org/reference/#/p5.Element/position
  picture.position(windowWidth/2,windowHeight/2); 
  //for displaying/hiding the picture  
  pictureDisplay = false;
  timeKeeper = 0;

}


function draw() {


  canvas.background(100, 100, 100);

  //display/show picture
  if(millis()>timeKeeper+1000){
    timeKeeper=millis();
    if(pictureDisplay){
      picture.style("display","initial"); 
      pictureDisplay=false;
    }
    else{
      picture.style("display","none"); 
      pictureDisplay=true;
    }
  }

}

<!DOCTYPE html>


<html>


    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        
  <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

        <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/addons/p5.dom.js"></script>        

        <script language="javascript" type="text/javascript" src="exampleCode.js" ></script>
                
    </head>

    <body>
    </body>
</html>

Answer 1

您可以使用 div 作为 canvas 和图片元素的容器。将此容器的样式设置为 style="position: relative; overflow: hidden;"

在设置函数中将 canvas 和创建的图像作为此容器的父级。

示例：

//time keeping
var timeKeeper;

//picture container
var pictureContainer;
//picture
var pictureLoaded;
var picture;

//display picture bool
var pictureDisplay;

//p5 canvas
var canvas;

function setup() {
  
  //create the p5 canvas element
  canvas = createCanvas(windowWidth, windowHeight);
  //parent the canvas to the div container defined in the html
  canvas.parent("sketch-holder");
  
  //create image
  picture = createImg("http://images.clipartpanda.com/foam-clipart-1334260620683400173foam_finger.svg", "fingerTransparent")
  //parent the picture to the same container 
  picture.parent("sketch-holder");
  
  //position(x,y) sets the image position styling to position:absolute, left:x, top:y -- as such:http://p5js.org/reference/#/p5.Element/position
  picture.position(windowWidth/2,windowHeight/2); 
  //for displaying/hiding the picture  
  pictureDisplay = false;
  timeKeeper = 0;

}


function draw() {

  canvas.background(100, 100, 100);

  //display/show picture
  if(millis()>timeKeeper+1000){
    timeKeeper=millis();
    if(pictureDisplay){
      picture.style("display","initial"); 
      pictureDisplay=false;
    }
    else{
      picture.style("display","none"); 
      pictureDisplay=true;
    }
  }

}

 <html>
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Tester</title>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/addons/p5.dom.js"></script>
<script src="sketch.js" type="text/javascript"></script>

<style>
 body {
  margin: 0;
  padding: 0; 
 }
 canvas {
  display: block;
  
 }
</style>
  </head>
  <body>
   <div id="sketch-holder" style="position: relative; overflow: hidden;"></div>
  </body>
</html>

当元素是 p5.js canvas 的一部分时停止调整视口大小

stop viewport resizing when an element is part off the p5.js canvas

javascript

css

processing

cordova

p5.js