canvas

WPF Canvas, how to add children dynamically with MVVM code behind

by

ItemsControl is your friend: <Grid> <Image Source=”…”/> <ItemsControl ItemsSource=”{Binding Points}”> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemContainerStyle> <Style> <Setter Property=”Canvas.Left” Value=”{Binding X}”/> <Setter Property=”Canvas.Top” Value=”{Binding Y}”/> </Style> </ItemsControl.ItemContainerStyle> <ItemsControl.ItemTemplate> <DataTemplate> <Border BorderBrush=”Red” BorderThickness=”1″ Width=”{Binding Width}” Height=”{Binding Height}”/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> The above assumes your VM exposes a collection of points via a Points property, and … Read more

Drawing a spiral on an HTML canvas using JavaScript

by

The Archimedean spiral is expressed as r=a+b(angle). Convert that into x, y coordinate, it will be expressed as x=(a+b*angle)*cos(angle), y=(a+b*angle)*sin(angle). Then you can put angle in a for loop and do something like this: for (i=0; i< 720; i++) { angle = 0.1 * i; x=(1+angle)*Math.cos(angle); y=(1+angle)*Math.sin(angle); context.lineTo(x, y); } Note the above assumes a … Read more

How to get a rotated linear gradient svg for use as a background image?

by

To rotate the gradient you can e.g use the ‘gradientTransform’ attribute, like this: <?xml version=”1.0″ ?> <svg xmlns=”http://www.w3.org/2000/svg” width=”100%” height=”100%” viewBox=”0 0 1 1″ preserveAspectRatio=”none”> <linearGradient id=”grad-ucgg-generated” gradientUnits=”userSpaceOnUse” x1=”0%” y1=”0%” x2=”100%” y2=”0%” gradientTransform=”rotate(65)”> <stop offset=”0%” stop-color=”#ffffff” stop-opacity=”0″/> <stop offset=”100%” stop-color=”#ff0000″ stop-opacity=”1″/> </linearGradient> <rect x=”0″ y=”0″ width=”1″ height=”1″ fill=”url(#grad-ucgg-generated)” /> </svg>

I want to do animation of an object along a particular path

by

Here is how to move an object along a particular path Animation involves movement over time. So for each “frame” of your animation you need to know the XY coordinate where to draw your moving object (rectangle). This code takes in a percent-complete (0.00 to 1.00) and returns the XY coordinate which is that percentage … Read more

HTML5 canvas create outer glow effect of shape

by

You can create outer glow using shadow like this: context.shadowBlur = 10; context.shadowColor = “black”; Take a look at this link for an example: http://www.williammalone.com/articles/html5-canvas-example/ And here’s a really basic JSFiddle. I think this will be faster than “a for loop to draw circles with different radius and alpha.” I hope this can help!

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)