要素がp5.jsのキャンバスに含まれていない場合、ビューポートのサイズを変更しない

p5.dom.jsを含むp5.js（p5js.org）を使用して視覚的なやりとりを構築しています。。要素がp5.jsのキャンバスに含まれていない場合、ビューポートのサイズを変更しない

私は悩み、それはまたの要素であるp5.jsキャンバス（の外に移動したときに、ビューポートのサイズを大きくするHTML画像要素を停止を抱えている。

私は解決策を適応しようとしているが、ここでCSS- hide element off the right of the screenを提案しましたスタイリングは-the画像がちょうど消える無駄に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);をやってみましたが、上記と同じ結果が得られました。 FYI

、私はp5.dom.jsからcreateImg()使用していますが、その後、プロジェクトはPhoneGapのシェルで実行されているようなどの画像を配置する.styleを使用して、私は、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"> 
 
     
 
\t \t <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>

出典

2016-05-12 itsmrjack

あなたのキャンバスと画像素子のコンテナとして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> 
 
\t body { 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t } 
 
\t canvas { 
 
\t \t display: block; 
 
\t \t 
 
\t } 
 
</style> 
 
    </head> 
 
    <body> 
 
    \t <div id="sketch-holder" style="position: relative; overflow: hidden;"></div> 
 
    </body> 
 
</html>

出典

2016-05-13 14:07:08 michaPau

感謝！それは素晴らしい作品です。私は他のp5jsスケッチで見たように画像のオーバーフローの問題とは関係ないとは思うが、私は縦軸に名目上のスライダーを表示している。 – itsmrjack

それは私が推測する体のデフォルトマージンです。 HTML内で ''を試してみてください。 – michaPau

私はすでにそれを試みましたが、それは違いはありません。また、。これらの両方は、エッジの周りの空白を取り除くのに便利です。しかし、を適用するとスクロールバーがなくなりましたが、p5スケッチの上に他のhtml要素が重ねられているので、このように適用するのが快適ではないでしょうか。 – itsmrjack

要素がp5.jsのキャンバスに含まれていない場合、ビューポートのサイズを変更しない

答えて

関連する問題