Processing.js - 이미지로 그리기

Question

HTML5 Canvas 요소와 Processing.js를 사용하여 이미지에 원 윤곽을 그려야합니다. 그러나 코드를 실행하면 해당 윤곽선 안의 영역이 단순히 해당 영역의 이미지 정보를 유지하는 대신 흰색으로 바뀝니다. 이 이미지로드 문제는 의심 스럽지만 댓글을 달았습니다 :

/* @pjs preload="myImage.jpg"; */ 

나는이 문제를 해결할 것입니다. 내 전체 .pde 파일은 다음과 같습니다.

/* @pjs preload="myImage.jpg"; */ 

// Global Variables 
PImage img; 

// Data Storage 
ArrayList cent_x; 
ArrayList cent_y; 
ArrayList cent_r; 

void setup() { 
    // Establish Canvas 
    size(760,560); 

    // Load Image 
    img = loadImage("myImage.jpg"); 

    // Initialize Data Structures 
    cent_x = new ArrayList(); 
    cent_y = new ArrayList(); 
    cent_r = new ArrayList(); 
} 

void draw() { 
    // Draw Background Image 
    image(img,0,0,width,height);  

    // Add to Data Structures 
    if (mousePressed) { 
     cent_x.add(mouseX); 
     cent_y.add(mouseY); 
     cent_r.add(15);  
    } 

    // Draw all Marks 
    for (int i = 0; i<cent_x.size(); i++) { 
     int c_x = cent_x.get(i); 
     int c_y = cent_y.get(i); 
     int c_r = cent_r.get(i); 

     stroke(255,255,0); 
     ellipse(c_x,c_y,c_r,c_r); 
    } 
} 

그 이유는 무엇입니까?

Answer 1

noFill();을 호출해야합니다. ellipse()를 호출하기 전에. 그럴 수있다