Repeating fill for strokes

[horacebury]

I am trying to create a rope image using a filled path. The method I would prefer to use is a stroked line, with the stroke fill by a repeated image. The code I have below causes a filled stroke, but it appears to be a one pixel-wide column of pixels from the fill image, repeated throughout the stroke (though it does follow the path properly.)

local halfW, halfH = display.contentCenterX, display.contentCenterY local circle = display.newCircle( halfW, halfH+260, 200 ) -- Fill with image local imagePaint = { type="image", filename="crate.png" } circle.fill = imagePaint -- Anti-alias stroke local brush = { type="image", filename="wood.png"} circle.stroke = brush --circle:setStrokeColor( 0, 1, 1 ) -- tint brush image circle.strokeWidth = 60 local line = display.newLine( 100, 100, 200, 120 ) line:append( 300, 160, 400, 220, 500, 320 ) line.width = 50 line.stroke = brush local img = display.newImage("wood.png") img.x, img.y = 300, 400 img.xScale, img.yScale = 10, 10

What I was hoping for was to create a line with a thick stroke and many points (to give the impression of a smooth curve) and to have the filling image repeat smoothly along the path. The problem is that - unlike with body fills - the stroke fill seems to only use 1 column of pixels from the brush image.

[horacebury]

Beginning to think this is a bug and not functionality - why would the fill image not be painted along the shape of the stroke?

[rob]

When I asked Walter about this when doing the strokes and fill tutorial this is what he said:

“For strokes, we take the vertical center line of the image, and stretch it across the entire outline of the stroke.”

Rob

[horacebury]

Paying devil’s advocate (and, tbh, because it suits my purposes): “why?”

To expand: It seems to me that there is a lot of opportunity to stroke filling. To start with, a stroke with heavy thickness could be seen as a separate area to fill in just the same way as the content of the object so that rotated, scaled and repeated images could be shown. Going further, as the stroke is also a path, it can be viewed as a literal path - that is, a series of points to be followed. In this way, direction could be given to the fill causing the filling image to be auto-rotated per segment. This would allow a path to be filled with, for example, a road image which, if the points on the path are close and curved enough, would actually look like a curving road - assuming the image fill does not restart at every point on the path.

[rob]

I’m not sure I can answer your “Why?” question.  I’ll share this with engineering and see if they can answer it.

Rob

[walter]

The stroke behavior is expected. We do take the middle column of the image and expand it out. Only filled objects give you control over texture repeats. As for why? It’s because it simplifies our implementation. The longer answer involves being able to guarantee that the stroke repeat distance is the same across all segments, a much harder problem.

One thing you can do is to use a series of thin rectangles (or polygons if you want to have even finer control). That gives you full control over the texture. Admittedly, it’s more work, but you do get the control you need.

[horacebury]

Beginning to think this is a bug and not functionality - why would the fill image not be painted along the shape of the stroke?

[rob]

When I asked Walter about this when doing the strokes and fill tutorial this is what he said:

“For strokes, we take the vertical center line of the image, and stretch it across the entire outline of the stroke.”

Rob

[horacebury]

Paying devil’s advocate (and, tbh, because it suits my purposes): “why?”

To expand: It seems to me that there is a lot of opportunity to stroke filling. To start with, a stroke with heavy thickness could be seen as a separate area to fill in just the same way as the content of the object so that rotated, scaled and repeated images could be shown. Going further, as the stroke is also a path, it can be viewed as a literal path - that is, a series of points to be followed. In this way, direction could be given to the fill causing the filling image to be auto-rotated per segment. This would allow a path to be filled with, for example, a road image which, if the points on the path are close and curved enough, would actually look like a curving road - assuming the image fill does not restart at every point on the path.

[rob]

I’m not sure I can answer your “Why?” question.  I’ll share this with engineering and see if they can answer it.

Rob

[walter]

The stroke behavior is expected. We do take the middle column of the image and expand it out. Only filled objects give you control over texture repeats. As for why? It’s because it simplifies our implementation. The longer answer involves being able to guarantee that the stroke repeat distance is the same across all segments, a much harder problem.

One thing you can do is to use a series of thin rectangles (or polygons if you want to have even finer control). That gives you full control over the texture. Admittedly, it’s more work, but you do get the control you need.