Draw a Line That Doesn't Get Thicker When Image Stretches

Draw a line that doesn't get thicker when image stretches

In browsers that implement SVG 1.2T you can have a non-scaling stroke Opera and Webkit support this as does Firefox from version 15.

<!-- via property -->
<line … vector-effect="non-scaling-stroke" />

<!-- via CSS -->
<style>
  line { vector-effect:non-scaling-stroke }
</style>
<line … />

How to make stroke width immune to the current transformation matrix

Edit:

There is an attribute you can add to your rect to get exactly this behavior:

vector-effect="non-scaling-stroke"

This was wrong:

This will work if you apply the transform directly to the shape, not the group it is in. Of course, if you wanted to group several items and scale them all together, that approach won't work.

<rect x="10" y="10" width="20" height="20" 
            stroke="blue" fill="none" stroke-width="2"
            transform="rotate(30) scale(5,1)"/>

This may also depend on your SVG viewer; Inkscape renders your file the way you want (stroke width not affected by scale) but Chrome renders it as you have shown.

Drawing a 1px thick line in canvas creates a 2px thick line

Canvas calculates from the half of a pixel

ctx.moveTo(50,150.5);
ctx.lineTo(150,150.5);

So starting at a half will fix it

Fixed version: http://jsfiddle.net/9bMPD/357/

This answer explains why it works that way.

Android canvas draw line - make the line thicker

Try Including this line just after you decleare 'mypaint'

 mypaint.setStyle(Paint.Style.STROKE); 

WPF drawing that stretches without stretching the Pen

I've done this by scaling a Path's Data, not the visual component.

1. Place a Path in a Canvas.
2. Set path.Data to a Geometry representing your data as percentages of the logical range.
3. Set path.Data.Transform to a ScaleTransform with ScaleX and ScaleY bound to the actual width and height.

How manage stroke with 2 SVGs with different size

You can use vector-effect="non-scaling-stroke".

This property is supported by FF,Chrome,opera and safari except IE.

http://www.w3.org/TR/2014/WD-SVG2-20140211/painting.html#NonScalingStroke

matplotlib: make plus sign thicker

You can use markeredgewidth (or mew). You'll want to combine it with markersize, otherwise you get thick but tiny markers.

For example:

plt.plot([2,4,6,1,3,5], '+', mew=10, ms=20)

Maintaining fixed-thickness lines in WPF with Viewbox scaling/stretching

A Viewbox can only "visually" scale its child element, including the thickness of any rendered stroke. What you need is a scaling that only applies to the geometry of the lines (or other shapes), but leaves the stroke unaffected.

Instead of using Line objects, you could draw your lines by Path objects that use transformed LineGeometries for their Data property. You could create a ScaleTransform that scales from logical coordinates to viewport coordinates by using the Grid's width and height as scaling factors in x and y direction. Each LineGeometry (or any other Geometry) would use logical coordinates in the range 0..1:

<Grid x:Name="grid">
    <Grid.Resources>
        <ScaleTransform x:Key="transform"
                        ScaleX="{Binding ActualWidth, ElementName=grid}"
                        ScaleY="{Binding ActualHeight, ElementName=grid}"/>
    </Grid.Resources>
    <Path Stroke="Black" StrokeThickness="1">
        <Path.Data>
            <LineGeometry StartPoint="0.1,0.1" EndPoint="0.9,0.9"
                          Transform="{StaticResource transform}"/>
        </Path.Data>
    </Path>
</Grid>

---

In order to get a uniform scaling you may simply bind both the ScaleTransform's ScaleX and ScaleY properties to either the ActualWidth or ActualHeight of the Grid:

<Grid x:Name="grid">
    <Grid.Resources>
        <ScaleTransform x:Key="transform"
                        ScaleX="{Binding ActualWidth, ElementName=grid}"
                        ScaleY="{Binding ActualWidth, ElementName=grid}"/>
    </Grid.Resources>
    ...
</Grid>

You may also calculate the uniform scaling factor from the minimum value of the width and height, with a bit of code behind:

<Grid x:Name="grid" SizeChanged="grid_SizeChanged">
    <Grid.Resources>
        <ScaleTransform x:Key="transform"/>
    </Grid.Resources>
    ...
</Grid>

with a SizeChanged handler like this:

private void grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var transform = grid.Resources["transform"] as ScaleTransform;
    var minScale = Math.Min(grid.ActualWidth, grid.ActualHeight);
    transform.ScaleX = minScale;
    transform.ScaleY = minScale;
}

9-patch stretching when it shouldn't stretch, Android

Your image is just too big to fit the layout. If you want it to be contracted you need to paint a line on the top and left borders -- the line marks region which will be contracted or stretched. I guess right now you have just dots on the borders.

Second option is to set the image as activity background, then it will be fitted in the screen. To do this add styles.xml to res/values folder:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="ExampleTheme" parent="android:Theme">
    <item name="android:windowBackground">@drawable/intro_bg</item>
</style>
</resources>

Then apply the theme to your activity at the manifest. The intro_bg drawable even doesn't need to be a 9-patch.

---

Related Topics