0

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

なぜそれが起こっているのかについて何か考えはありますか？

4

1 に答える 1

2

noFill(); を呼び出す必要があります。ellipse() を呼び出す前に。それはそれを行う必要があります

于 2013-03-13T18:23:44.470 に答える