Question

我正在使用p5.js（p5js.org）构建视觉交互，包括p5.dom.js，以便我可以在其中执行一些html内容。

我无法停止html图像元素，当它移出p5.js画布（也是一个元素时）时会增加视口的大小。

我尝试调整此处建议的解决方案CSS- hide element off the right of the screen，将一个元素放在另一个元素中，该元素的样式设置为overflow:hidden且position:relative无效 - 图像就会消失。

虽然在下面的代码中注释/取消注释pictureContainer.style("position", "relative");实际上隐藏/显示图像，这让我想知道p5js和html样式之间是否存在某种冲突？！

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

仅供参考，我正在使用p5.dom.js中的createImg()，然后使用.style定位图像等，因为项目正在一个phonegap shell中运行，我遇到了p5.js方法的问题iOS上的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作为画布和图片元素的容器。将此容器的样式设置为style="position: relative; overflow: hidden;"

在设置功能中，将画布和创建的图像添加到此容器中。

实施例：

//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画布分开时，停止视口大小调整

1 个答案: