Question

我这里有一个小动画，可以重复无缝模式动画。

我在画布中间有一个白色的文字，环状的形状经过。我想要解决的是当白条越过文本时它变成黑色。因此，当白色条的一半超过“文本”的T时，T的一半将是黑色而未覆盖的一半将在对角线上仍为白色。

分开这些字母会这样做吗？通过掩蔽或使用矢量图像？

这是我想要实现的图形示例。

drawLine wob1;
drawLine wob2;
drawLine wob3;
drawLine wob4;
drawLine wob5;
PFont helv;
drawText title;

void setup() {

//frame.setResizable(true);
size(320, 480);
smooth();
frameRate(50);


wob1 = new drawLine(0);
wob2 = new drawLine(200);
wob3 = new drawLine(400);
wob4 = new drawLine(600);
wob5 = new drawLine(800);

title = new drawText();

}

void draw() {

background(#000000);

wob1.increment();
wob1.display(#ffffff);
wob1.pos();
wob1.boundary();

wob2.increment();
wob2.display(#ffffff);
wob2.boundary();

wob3.increment();
wob3.display(#ffffff);
wob3.boundary();

wob4.increment();
wob4.display(#ffffff);
wob4.boundary();

wob5.increment();
wob5.display(#ffffff);
wob5.boundary();

title.rendertitle(#ffffff;

}



class drawLine {

int x = -480;
int y = 0;
int count;

drawLine(int offset) {

this.x = this.x + offset;

}

void increment() {

this.x += 3;
this.y += 4;

}

void display(int col) {

//noStroke(); 
fill(col);
//translate(0,0);
rectMode(CENTER);
rotate(-PI/3.0);
rect(x,y,100,3000);
rotate(PI/3.0);

}

void pos() {

println(this.x);

//if(this.x >= -218 && this.x <= 207){ colr = #000000; } else { colr = #ffffff; }

}

void boundary() {

if(this.x > 520) {

this.x = -480; this.y = 0; 
}

}

}


class drawText {

drawText() {

helv = loadFont("Helvetica-Bold.vlw");

}

void rendertitle(int colr) {
fill(colr);
textFont(helv, 30);
text("Text goes here", width/2, height/2, 240, 50);
}

}

Answer 1

我使用两个生成的图像制定了解决方案。第一个imgText仅包含黑色背景前的文本（白色）。第二个imgMask用作掩码，因此包含屏幕线图案。在setup()部分内只生成一次（文本图像）是很好的;因为你的类型不会改变/移动或转换。如果要实现“扫描”线的效果，必须每帧更新掩模图像。通过draw()参数的移位，每{{}}}循环都会发生这种情况。

其余的很基本;清除每帧的背景并在显示实际的蒙版图像之前绘制offset的反转版本。

imgText

叠加rect时更改文本填充颜色 - 处理

1 个答案: