ProcessingJS修改SVG中的stroke-width

时间:2014-07-02 18:06:41

标签: svg processing stroke

我想在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; 
}

0 个答案:

没有答案