Can't get stroke-width to 1 pixel
2,560 views
Skip to first unread message
Laminico
Nov 2, 2010, 10:09:45 AM11/2/10
to Raphaël
With SVG, I can get it down to 1 pixel. Yet not with Raphael. Any
idea? See my scripts below:
=== SVG script: it shows a black 1 pixel wide stroke
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2"
baseProfile="tiny" width="6cm" height="4cm" viewBox="0 0 600 400"
viewport-fill="rgb(255,150,200)">
<line stroke="black" stroke-width="1" x1="100" y1="50" x2="100"
y2="350"/>
</svg>
=== Raphael: it shows a grey two pixel wide stroke
<html>
<head>
<title>Raphael Play</title>
<script type="text/javascript" src="http://github.com/
DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script type="text/javascript">
window.onload = function() {
var paper = new
Raphael(document.getElementById('canvas_container'), 600, 400);
paper.path("M100,50l0,300").attr({stroke: 'black', 'stroke-
width': 1})
paper.path("M200,50l0,300").attr({stroke: 'black', 'stroke-
width': 1, 'vector-effect': 'non-scaling-stroke'})
}
</script>
<style type="text/css">#canvas_container</style>
</head>
<body>
<div id="canvas_container"></div>
</body>
</html>
idea? See my scripts below:
=== SVG script: it shows a black 1 pixel wide stroke
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2"
baseProfile="tiny" width="6cm" height="4cm" viewBox="0 0 600 400"
viewport-fill="rgb(255,150,200)">
<line stroke="black" stroke-width="1" x1="100" y1="50" x2="100"
y2="350"/>
</svg>
=== Raphael: it shows a grey two pixel wide stroke
<html>
<head>
<title>Raphael Play</title>
<script type="text/javascript" src="http://github.com/
DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script type="text/javascript">
window.onload = function() {
var paper = new
Raphael(document.getElementById('canvas_container'), 600, 400);
paper.path("M100,50l0,300").attr({stroke: 'black', 'stroke-
width': 1})
paper.path("M200,50l0,300").attr({stroke: 'black', 'stroke-
width': 1, 'vector-effect': 'non-scaling-stroke'})
}
</script>
<style type="text/css">#canvas_container</style>
</head>
<body>
<div id="canvas_container"></div>
</body>
</html>
Arthur Clemens
Nov 2, 2010, 5:55:36 PM11/2/10
to raph...@googlegroups.com
Try subtracting 0.5 pixel.
Arthur
Laminico
Nov 3, 2010, 4:29:49 AM11/3/10
to Raphaël
@Arthur: thx. But it does work. It actually dims the color of the line
(light grey); but the line is still 2 pixel wide and not 1.
Actually, already when I set stroke-width = 1, the color of the line
is not pure black (grey). And it is 2 pixel wide.
When I set strode-width = 2, I get a 2 pixel wide line and actual
black.
(light grey); but the line is still 2 pixel wide and not 1.
Actually, already when I set stroke-width = 1, the color of the line
is not pure black (grey). And it is 2 pixel wide.
When I set strode-width = 2, I get a 2 pixel wide line and actual
black.
Laminico
Nov 3, 2010, 5:43:57 AM11/3/10
to Raphaël
Ooops ! I mean't: "it does NOT work"
Clifford Heath
Nov 3, 2010, 6:35:23 AM11/3/10
to raph...@googlegroups.com
On 03/11/2010, at 8:43 PM, Laminico wrote:
> Ooops ! I mean't: "it does NOT work"
> Ooops ! I mean't: "it does NOT work"
I think you need to locate your lines on 0.5 px coordinate boundaries
as well.
Clifford Heath.
>
> --
> You received this message because you are subscribed to the Google
> Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.
> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB
> .
>
Arthur Clemens
Nov 3, 2010, 6:44:57 AM11/3/10
to raph...@googlegroups.com
Indeed, the line coordinates should be at 0.5 values. If you then have a pixel width of 1 it should look fine.
But Raphael _is_ lacking a proper solution for hairlines.
I think it should implement vector-effect="non-scaling-stroke"
Arthur
Laminico
Nov 4, 2010, 6:56:34 PM11/4/10
to Raphaël
Thx Arthur ! I got it to work your way. I need to offset the
coordinates by 0.5 pixel and it works. Cheers !!
coordinates by 0.5 pixel and it works. Cheers !!
Bijay Dash
Jan 3, 2014, 6:49:52 AM1/3/14
to raph...@googlegroups.com
add the following css and your problem will be solved..
path{
shape-rendering : crispEdges;
}
Reply all
Reply to author
Forward
0 new messages