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() 之前。应该这样做