Question

js初学者并尝试制作改变眉毛形状的程序。

我刚刚完成了通过mousePressed事件制作形状，但我想知道如何在我制作的形状内绘制线条！

如下图所示，我使用p5.js函数（beginShape（），endShape（CLOSE））制作了眉毛的形状，但是可以在形状内画线吗？

任何帮助欣赏!!

<html>
    <head>
        <meta charset="UTF-8">
        <script src="p5/p5/p5.min.js"></script>
        <script src="sketch7.js"></script>
    </head>
    <body>
    </body>
</html>

var brows=[];
var browsFirst=[];
var flag=0;

function Brow(x,y){
    this.x=x;
    this.y=y;
    this.clicked=function(){
        vertex(this.x,this.y);
        noFill();
        ellipse(this.x, this.y, 8,8);
    }
}
function preload(){
    img=loadImage("faceSample.jpg");
}

function setup(){
    createCanvas(970,1334);
    image(img,0,0);

}

function fillColor(){
    fill(54,50,49,80);
}

function mousePressed(){

    brows.push(new Brow(mouseX,mouseY));

    if(brows.length==1){
        beginShape();
        brows[brows.length-1].clicked();
    }
    var d=dist(brows[0].x, brows[0].y, mouseX, mouseY);
    if(d>4){
        brows[brows.length-1].clicked();
    }else{
        flag=flag+1;
        fillColor();

        endShape(CLOSE);
        if(flag==2){
            print("Completed to make polygon");
            for(var i=0; i<brows.length; i++){
                browsFirst[i]=brows[i];
            }
            brows=[];
            flag=0;
        }

    }
    if(brows.length>1){
        line(brows[brows.length-1].x,brows[brows.length-1].y,brows[brows.length-2].x,brows[brows.length-2].y);
    }

}

在p5.js中绘制形状内的线条

0 个答案: