时间戳

首页 > 解决方案 > P5 尝试分解图形和画布代码

javascript - P5 尝试分解图形和画布代码

问题描述

我想分解代码以在图形或标准画布中绘制相同的东西。
（在我的真实程序中，我希望在构建时给出的某些上下文中绘制自己的自治类）
我无法从画布中找到一些可以匹配除线条之外的图形指令的等价物。
在下文中，我尝试将画布或图形对象赋予绘图方法someDraw，但画布上只出现线条，而整个绘图出现在图形中。


let canvas;
let myGraph;

function setup() {
    canvas = createCanvas(200,300,WEBGL);
    canvas.parent('sketch-div');
    myGraph = createGraphics(200,300,WEBGL);
    stroke('red');
    noFill();
    noLoop();
}

function draw(){
    // direct draw on canvas / doesn't work correctly
    someDraw(canvas);
    // indirect draw on graphics, then show image 
    someDraw(myGraph);
    // show result
    image(myGraph,100,100);
}

function someDraw(pg){
 pg.clear();
 pg.background(color(0,0,200));

  // as webgl set 0,0 upper left 
 pg.translate(-pg.width/2, -pg.height/2);
 pg.stroke('red');
 pg.line(0,0,100,50);
 pg.rect(0,0,60,60);
 pg.ellipse (25,50,50,100);
}

您可以看到画布中绘制的（红色）线，但看不到矩形或椭圆。图形是正确的。 在此处输入图像描述

另一个效果：如果这个小程序循环（参见设置中的 noLoop() ），图形第一次出现转瞬即逝，然后不再显示。

所以，画布和图形不在同一个层次结构中，但是有没有一种通用的方法可以在不复制所有代码的情况下在两者上绘制？

标签： javascriptcanvasprocessingp5.js

解决方案

使用实例化：

var sketch = function( p ) {
    
    let canvas;
    let myGraph;

    p.setup = function() {
        canvas = p.createCanvas(200,300, p.WEBGL);
        canvas.parent('sketch-div');
        myGraph = p.createGraphics(200,300,p.WEBGL);        
        p.noLoop();
    }

    p.draw = function(){
        // [...]
    }
}

var test_3d = new p5(sketch);

将 p5 实例传递给someDraw

someDraw(p);

或 p5.Renderer 对象：

someDraw(myGraph);

完整示例：

var sketch = function( p ) {
    let canvas;
    let myGraph;

    p.setup = function() {
        canvas = p.createCanvas(200,300,p.WEBGL);
        canvas.parent('sketch-div');
        myGraph = p.createGraphics(200,300,p.WEBGL);        
        p.noLoop();
    }

    p.draw = function(){
        // direct draw on canvas / doesn't work correctly
        someDraw(p);
        // indirect draw on graphics, then show image 
        someDraw(myGraph);
        // show result
        p.image(myGraph,100,100);
    }

    function someDraw(pg){
        pg.clear();
        pg.background(pg.color(0,0,200));
        // as webgl set 0,0 upper left 
        pg.translate(-pg.width/2, -pg.height/2);
        pg.stroke('red');
        pg.noFill();
        pg.line(0,0,100,50);
        pg.rect(0,0,60,60);
        pg.ellipse (25,50,50,100);
    }
}

var test_3d = new p5(sketch);
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<div id="sketch-div"></div>

推荐阅读