我想在ProcessingJS草图中动态设置SVG曲线的笔触宽度。
到目前为止,我找到的唯一解决方案是在SVG形状上使用disableStyle(),然后手动设置所有样式属性,如Fill(),stroke(),strokeJoin()和strokeWeight()。但是,当以这种方式执行时,线条的不透明度似乎呈现不同。
有没有办法只访问和修改笔划宽度并保持其他样式不变?
这是我到目前为止的代码。它似乎工作正常,但不必手动重置原始svg文件中的所有样式属性会很好。
/* @pjs preload="frog_trajs.svg"; */
PShape trajs;
float zoom_factor = 1.0;
float imgW;
float ingH;
float lineWeight = 1.00;
//panning variables
float centerX;
float centerY;
boolean active = false;
PFont f;
void setup()
{
size(900, 600);
frameRate(20);
centerX = width/2;
centerY = height/2;
trajs = loadShape("frog_trajs.svg");
trajs.disableStyle();
imgW = trajs.width;
imgH = trajs.height;
}
void draw()
{
background(255);
//here, the styles are reset, with lineWeight dynamically updated by mouseScrolled()
shapeMode(CENTER);
strokeJoin(ROUND);
strokeWeight(lineWeight);
stroke(#EF25B2,170);
noFill();
shape(trajs,centerX,centerY,imgW,imgH);
}
void mouseScrolled()
{
if(active){
if(mouseScroll > 0)
{
//zoom out;
zoom_factor = 1 - mouseScroll*0.01;
}
else
{
//zoom in;
zoom_factor = 1 - mouseScroll*0.01;
}
lineWeight = lineWeight/zoom_factor;
}
}
void mouseOver(){
active = true;
}
void mouseOut(){
active = false;
}