Support for lines and polygons

[pietschy]

It would be great if you could render polygons and lines.

[StanAngeloff]

I thought about adding these, but there is nothing in the CSS3 spec that allows you to draw polys (apart from fiddling about with borders). Line drawing is already available in ChunkyPNG so it should be easy to add support for it, although again I don't see a need.

It would really help if you have some real-world use cases for both?

[pietschy]

My initial use case was to render simple arrows for my drop down menus. I also have some gradient backgrounds that have top & bottom edges etc that I'd like to render highlights etc. I was hoping to build a library of basic basic shapes that I can use across various projects etc. Currently I have to have a number of variants of each image and it's quite a pain slicing everything out.

In a similar vien I'd like to be able to generate images like the side bar navigation in this image.

I'm not sure if they're worthy use cases or not (c:

I'd also love to see the writing of image files (I realise this isn't on the cards at this point) since IE7 & data urls is no fun )c:

Thanks & cheers Andrew

[StanAngeloff]

I guess if you are rendering an iPhone-style back button, you'd have to have some sort of a triangle shape to work with. For anything more complex, you can draw the shape in Photoshop, generate a canvas in Magick with the fill type you want (e.g., red-yellow gradient) then mask it out.

As for saving, I have been experimenting with Compass sprites and I ended up duplicating a lot of the code. I am almost certain the final code will end up generating sprites (you can ofc opt-it to use one image per sprite).

[pietschy]

Thanks for that. After thinking a bit more about it polygons wouldn't be that much use without curves, and then you're looking at control points etc and then your looking at something like svg so using external masks sounds a lot better. I think simple lines would still be nice (especially if they're easy to do).

Sounds great about the sprites. Thanks for sharing the library.

Cheers

[StanAngeloff]

I'd also love to see the writing of image files (I realise this isn't on the cards at this point) since IE7 & data urls is no fun )c:

The latest master adds support for writing images to disk. Using Compass beta you can construct a sprite (demo page updated).

As for the lines and polys, I am researching a good algorithm to do anti-aliased filled polygons, but not having much luck at present.

[pietschy]

Excellent, thanks.

[pietschy]

I just tried the sprites and they're working great (thanks).

I'm now running into an issue trying to use rgba colors. Here's the code

background: magick-sprite('content_top',
        magick-canvas(10px, 16px,
            magick-fill(white, 0px, 0px, 10px, 0px)
            magick-fill(magick-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0)), 0px, 1px, 10px, 16px)
        )
    ) top left repeat-x;

The error I'm getting is:

TypeError on line ["93"] of /Users/andrew/.rvm/gems/ruby-1.9.2-p136/gems/chunky_png-1.1.0/lib/chunky_png/color.rb: can't convert Float into Integer
  /Users/andrew/.rvm/gems/ruby-1.9.2-p136/gems/chunky_png-1.1.0/lib/chunky_png/color.rb:93:in `rgba'
  /Users/andrew/arpsoftware/arpsoft_website/website/packages/arpsoft_base/themes/clean_wide/extensions/magick/lib/magick/utils.rb:38:in `to_chunky_color'
  /Users/andrew/arpsoftware/arpsoft_website/website/packages/arpsoft_base/themes/clean_wide/extensions/magick/lib/magick/types/gradients.rb:117:in `block in cache_stops'

I tried changing utils.rb from:

def to_chunky_color(color)
  ChunkyPNG::Color.rgba(color.red, color.green, color.blue, color.alpha * 255)
end

to

def to_chunky_color(color)
  ChunkyPNG::Color.rgba(color.red, color.green, color.blue, (color.alpha * 255).to_i)
end

but now I'm getting

NoMethodError on line ["46"] of /Users/andrew/.rvm/gems/ruby-1.9.2-p136/gems/sass-3.1.0.alpha.252/lib/sass/script/list.rb: undefined method `to_sass' for #<Compass::Magick::Command:0x000001016e67f0>

Any ideas?

Cheers

[StanAngeloff]

Could it be a missing comma after the first fill, error messages can get quite cryptic at times?

magick-fill(white, 0px, 0px, 10px, 0px)

to

magick-fill(white, 0px, 0px, 10px, 0px),

[pietschy]

Yep, that was it. All working fine now.

Thanks again.

Cheers

[moll]

Did this line drawing idea go anywhere?

I'm adding some highlights to generated gradients and a simple draw-line-at-pixel-1 would be a simpler solution than bending linear-gradient with pixel-stops.

[StanAngeloff]

@moll: I haven't had the chance to investigate yet, but if you are looking for lines, you could use magick-fill to draw one. You could go a step further and create a plug-in which makes use of magick-fill or even define it inline with Sass as a @function:

@function magick-line($type, $x1, $y, $x2) {
  @return magick-fill($type, $x1, $y, $x2, $y + 1);
}

html {
  background: magick-canvas(200, 200, magick-fill(blue), magick-line(red, 1, 1, 100));
}

[pietschy]

Hi Stan,

The Sass @function approach is really nice. I hadn't noticed that sass had that.

I also noticed that phantomjs supports rendering of svg, is it be possible using magick-phantom to specify an SVG file to render and pass it some variables?

Cheers Andrew

[moll]

@StanAngeloff: Thanks for the magick-fill usage with coordinates tip. Solved my goal nicely.

[pietschy]

Sorry, didn't mean to close this.

[StanAngeloff]

@pietschy: I also noticed that phantomjs supports rendering of svg, is it be possible using magick-phantom to specify an SVG file to render and pass it some variables?

This is not something you can do with compass-magick, however you could probably hack it together with a bit of Ruby. You can construct the SVG in CSS as a string or pass a filename to a custom phantom script and read out a .png file.

[StanAngeloff]

This feature is beyond the scope of this project. To anyone looking to draw lines, triangles, rectangles and any other imaginable shape, have a look at compass-canvas.