Статьи

GraphicsBuilder Tutorial IV: Штрихи

Май 1, 2019

Часть четвертая из серии учебных пособий GraphicsBuilder . Теперь ход для Strokes, с их помощью вы можете изменить внешний вид любой фигуры, контура или группы.

Вступление

В предыдущих частях этой серии ( I , II , III ) вы, возможно, видели, что фигуры имеют черную рамку, иногда белую, иногда более толстую, иногда у них даже нет рамки. После прочтения следующего раздела вы сможете изменять цвет и форму границы различными способами, кроме пары свойств.

Штрихи

Давайте начнем с ударов. Как показано в предыдущих фрагментах, формы принимают свойства borderColor и borderWidth , следующий рисунок иллюстрирует этот факт, мы будем использовать тот же контур, чтобы вы могли легко распознать изменения от одного параметра к другому.

[Img_assist | NID = 1745 | название = | убывание = | ссылка = нет | выравнивание не = средняя | ширина = 200 | высота = 130]

antialias on
rect( width: 200, height: 130, fill: 'white', borderColor: no )
xpath( borderWidth: 3, borderColor: 'darkGreen' ){
   xmoveTo( x: 50, y: 130 )
   xcurveTo( x1:  50, y1:  30, x2: 200, y2:  30, x3: 200, y3: 130 )
   xcurveTo( x1: 200, y1: 230, x2: 350, y2: 230, x3: 350, y3: 130 )
   transformations { scale(x: 0.5, y: 0.5) }
}

Вот аналогичная версия, но на этот раз, используя узел basicStroke , он принимает те же атрибуты [width, color], но и другие свойства, такие как join, mitter, dash и dashphase, потому что в конце концов он создает java.awt.BasicStroke под охватывает.

[Img_assist | NID = 1746 | название = | убывание = | ссылка = нет | выравнивание не = средняя | ширина = 200 | высота = 130]

antialias on
rect( width: 200, height: 130, fill: 'white', borderColor: no )
xpath {
   basicStroke( width: 10, color: 'red' )
   xmoveTo( x: 50, y: 130 )
   xcurveTo( x1:  50, y1:  30, x2: 200, y2:  30, x3: 200, y3: 130 )
   xcurveTo( x1: 200, y1: 230, x2: 350, y2: 230, x3: 350, y3: 130 )
   transformations { scale(x: 0.5, y: 0.5) }
}

К сожалению, Java2d включает только одну реализацию java.awt.Stroke (вышеупомянутый BasicStroke), к счастью, Джерри Хакстейбл решил выпустить набор настраиваемых штрихов , которые теперь доступны в GraphicsBuilder. Первый — мой личный фаворит, shapeStroke , так как он позволит вам нарисовать любую фигуру, повторенную вдоль пути границы, или комбинацию фигур в этом отношении, как показано на следующем рисунке.

[Img_assist | NID = 1747 | название = | убывание = | ссылка = нет | выравнивание не = средняя | ширина = 200 | высота = 130]

antialias on
rect( width: 200, height: 130, fill: 'white', borderColor: no )
xpath( borderColor: 'blue' ) {
   shapeStroke( advance: 15 ){
      circle( cx: 5, cy: 5, radius: 5 )
      star( cx: 5, cy: 5, or: 10, ir: 5 )
   }
   xmoveTo( x: 50, y: 130 )
   xcurveTo( x1:  50, y1:  30, x2: 200, y2:  30, x3: 200, y3: 130 )
   xcurveTo( x1: 200, y1: 230, x2: 350, y2: 230, x3: 350, y3: 130 )
   transformations { scale(x: 0.5, y: 0.5) }
}

Следующим в списке является wobbleStroke, он случайным образом изменяет свою толщину, в результате чего каждый раз, когда вы его используете, вы получаете другой штрих.

[Img_assist | NID = 1748 | название = | убывание = | ссылка = нет | выравнивание не = средняя | ширина = 200 | высота = 130]

antialias on
rect( width: 200, height: 130, fill: 'white', borderColor: no )
xpath( borderColor: 'orange' ){
   wobbleStroke()
   xmoveTo( x: 50, y: 130 )
   xcurveTo( x1:  50, y1:  30, x2: 200, y2:  30, x3: 200, y3: 130 )
   xcurveTo( x1: 200, y1: 230, x2: 350, y2: 230, x3: 350, y3: 130 )
   transformations { scale(x: 0.5, y: 0.5) }
}

Теперь мы переключаем передачи, поскольку следующие штрихи принимают другие штрихи как часть их конфигурации, поэтому вы можете использовать любой из ранее показанных штрихов в сочетании со следующим. ZigzagStroke рисует зигзагообразный рисунок, используя другой штрих, как показано на следующем рисунке, используя базовый штрих в качестве базового.

[Img_assist | NID = 1749 | название = | убывание = | ссылка = нет | выравнивание не = средняя | ширина = 200 | высота = 130]

 

antialias on
rect( width: 200, height: 130, fill: 'white', borderColor: no )
xpath( borderColor: 'black' ){
   zigzagStroke {
      basicStroke( width: 2 )
   }
   xmoveTo( x: 50, y: 130 )
   xcurveTo( x1:  50, y1:  30, x2: 200, y2:  30, x3: 200, y3: 130 )
   xcurveTo( x1: 200, y1: 230, x2: 350, y2: 230, x3: 350, y3: 130 )
   transformations { scale(x: 0.5, y: 0.5) }
}

Но что, если вы хотите смешать два удара вместе, не следуя зигзагообразному шаблону? ну, вам просто нужно переключиться на композитный ход, когда вы закончите. Вы можете установить пару свойств (stroke1 / stroke2) или вложить пару штрихов, как показано в следующем примере

[img_assist|nid=1751|title=|desc=|link=none|align=middle|width=200|height=130]

antialias on
rect( width: 200, height: 130, fill: 'white', borderColor: no )
xpath( borderColor: 'violet' ){
   compositeStroke {
      wobbleStroke()
      basicStroke( width: 2 )
   }
   xmoveTo( x: 50, y: 130 )
   xcurveTo( x1:  50, y1:  30, x2: 200, y2:  30, x3: 200, y3: 130 )
   xcurveTo( x1: 200, y1: 230, x2: 350, y2: 230, x3: 350, y3: 130 )
   transformations { scale(x: 0.5, y: 0.5) }
}

Now what if you wanted a different way to combine those strokes, say like Area operations? no problem, compoundStroke can help you achieve that goal, as it it will perform the 4 Area operations available on shapes but with strokes.

[img_assist|nid=1752|title=|desc=|link=none|align=middle|width=200|height=130]

antialias on
rect( width: 200, height: 130, fill: 'white', borderColor: no )
xpath( borderColor: 'cyan' ){
   compoundStroke( operation: 'subtract' ){
      basicStroke( width: 18 )
      shapeStroke( advance: 20 ){
         circle( cx: 5, cy: 5, radius: 5 )
         star( cx: 5, cy: 5, or: 10, ir: 5 )
         rect( width: 10, height: 10 )
      }
   }
   xmoveTo( x: 50, y: 130 )
   xcurveTo( x1:  50, y1:  30, x2: 200, y2:  30, x3: 200, y3: 130 )
   xcurveTo( x1: 200, y1: 230, x2: 350, y2: 230, x3: 350, y3: 130 )
   transformations { scale(x: 0.5, y: 0.5) }
}

The last stroke is also one of my favorites, text-on-a-path can’t get any easier, as the pic shows by itself

[img_assist|nid=1753|title=|desc=|link=none|align=middle|width=200|height=130]

antialias on
rect( width: 200, height: 130, fill: 'white', borderColor: no )
xpath( borderColor: 'navyBlue' ){
   textStroke( text: 'Drawing text over a path is simple!' )
   xmoveTo( x: 50, y: 130 )
   xcurveTo( x1:  50, y1:  30, x2: 200, y2:  30, x3: 200, y3: 130 )
   xcurveTo( x1: 200, y1: 230, x2: 350, y2: 230, x3: 350, y3: 130 )
   transformations { scale(x: 0.5, y: 0.5) }
}

Conclusion

Now you now how to draw shapes, apply paints to them change the color (and paint) of their borders and even change how the border looks. All these features should give you plenty of options to create your drawings, but as you have probably seen in some of the snippets there are other features we need to discuss, as transformations, which will be the topic of the next part on this series. For now enjoy, drawing with Java2D and Groovy.

35
Share: