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

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

javascript html

Javascript 在p5.js中的形状内绘制线,javascript,html,p5.js,Javascript,Html,P5.js,js初学者，正在尝试制作改变眉毛形状的程序我刚刚完成了通过鼠标按下事件制作形状，但我想知道如何在我制作的形状内绘制线条像下面的照片一样，我使用p5.js函数（beginShape（），endShape（CLOSE））制作了眉毛的形状，但是否可以在形状内部画线任何帮助，谢谢 var brows=[]； var browsFirst=[]； var标志=0；函数眉（x，y）{ 这个.x=x；这个。y=y； this.clicked=function（）{ 顶点（this.x，this

js初学者，正在尝试制作改变眉毛形状的程序

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

像下面的照片一样，我使用p5.js函数（beginShape（），endShape（CLOSE））制作了眉毛的形状，但是否可以在形状内部画线

任何帮助，谢谢


var brows=[]；
var browsFirst=[]；
var标志=0；
函数眉（x，y）{
这个.x=x；
这个。y=y；
this.clicked=function（）{
顶点（this.x，this.y）；
noFill（）；
椭圆（this.x，this.y，8,8）；
}
}
函数预加载（）{
img=loadImage（“faceSample.jpg”）；
}
函数设置（）{
createCanvas（9701334）；
图像（img，0,0）；
}
函数fillColor（）{
填充（54,50,49,80）；
}
函数mousePressed（）{
眉毛。推（新眉毛（mouseX，mouseY））；
如果（眉毛长度==1）{
beginShape（）；
浏览[brows.length-1]。单击（）；
}
var d=dist（眉毛[0].x，眉毛[0].y，鼠标x，鼠标y）；
如果（d>4）{
浏览[brows.length-1]。单击（）；
}否则{
flag=flag+1；
fillColor（）；
端形（闭合）；
如果（标志==2）{
打印（“完成以制作多边形”）；
对于（var i=0；i1）{
行（brows[brows.length-1].x，brows[brows.length-1].y，brows[brows.length-2].x，brows[brows.length-2].y）；
}
}

但是，您的代码在哪里？请在您的问题中添加该代码@ℊααnd我计划根据眉毛的形状自动画线，并在屏幕上模拟。但是如果你帮我用图像来做，我不介意：）@ℊααnd这是我做的所有代码…我试图变换眉毛的形状，但我失败了…所以我想先画线，然后我会找到变换形状的方法。但是，你运行了代码吗？它甚至没有在画布上画任何东西@ℊαα，它工作了。当你手动点击鼠标时，我的代码工作。我上传照片

<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);
    }

}