Write Text ontop of an Image dynamically in ASP.NET MVC3 - c#

How would I write Text ontop of an image, and if possible, at an angle.
So, the box is the origional image. 64x64 for example.
And I want to write text on it for example test
It needs to be rotated ~30 degrees as seen. and If possible too, leaning away at the top.
So that It seems like it is written on the surface.
I have no experience with C# Graphics, and would like some help please.
Please include any using references for my ease.

You can use JavaScript and jQuery functions and Css 3.0 to update add a div containing your text ontop of the image and then rotate it.
this link may help you to reach your goal

Related

Create an Object Editor in C# for WinForms

I need to find, or create an editor that will handle text and images as objects. For instance I have a 3 line string of text, to be able to move it around and position it within a canvas, also the ability to add an image, and possibly resize it within that canvas. and take the result, and save it, whether I get the the offsets and positions manually, of each of the objects (preferable) , or get the entire canvas as an image, to be able to save and print.
Rulers would be great... Im not trying to re-create Photoshop, but the idea is similar.
I will be doing this in a C# WinForms application, it does seem however that a WPF solution might be better suited, and I think I can have a WPF control within winforms...
Any direction or advice would be greatly appreciated.
Forget winforms. It doesn't support anything. Your best bet is to do it in WPF and if you need, you can integrate it into an existing winforms application via the ElementHost.
Please see my similar answers/samples about this:
https://stackoverflow.com/a/15580293/643085
https://stackoverflow.com/a/15469477/643085
https://stackoverflow.com/a/15821573/643085
Also, see this example with support for zoom, panning and resizing functionality:
https://stackoverflow.com/a/16947081/643085
They're all MVVM based and have some interesting features.
You can easily customize these samples and add ANY type of elements:
images,
geometries,
usable interactive UI elements with functionality (TextBoxes, ComboBoxes, whatever),
text,
videos,
FlowDocuments,
or whatever that's visible on screen)
by adding additional data items and their corresponding DataTemplates.

Multilanguage support for images in .Net

I have a desktop app build using .net. I want it to support multilanguages. I am able to do that using resources. Issue is what should I do for images which have text? Should I include all images for separate languages? If so then this will make it difficult and also will increase its size.
I just read that in Android there is "9 patch image", isn't there something similar?
I wish to add background image, and write text on top of that. This background image should resize without change in quality of the image automatically to the size of text in that language.
I couldn't think of any way to avoid separate images with WinForms. WPF, no problem. Web app, no problem. I played around with both text and image on a Button control, but that does not scale fully. I tried using a label over a PIctureBox, but it is impossible to achieve transparency with a Label control. I also tried this using a WebBrowser control--such a thing could possibly work, but would take some further research and would probably change your deployment dramatically (since you would need to make the localization available from some http server).
So I think there is no easy way to do this--I could find nothing easier than maintaining the images separately.
In one of my projects, i had text displayed on top of images. Since the site was multilingual, so no text was part of the images. Instead text was displayed on top of the images, using css properties for absolute position. This had to be tested in all browsers, with multiple languages, as the text size varies in each language, this might break the UI. so enough space has to be provided for text considering all supported languages

Render Tube and resize, dynamically add text

What I am looking to do in my Windows Forms application (or even WPF). Is to dynamically render an image of a tube, or cylinder (with a 3d look or having some sort of depth for a better visual experience), setting the length and hieght and so on, (also need rulers and such to zoom in and out). But then allow the user to enter some text, which will then be placed on that tube or cylinder, for display purposes, able to scale the text size, to create a visual representation of what it would look like IRL.
Any ideas on where I can start, or some examples I can build off of? This vector type display is new to me, so any help would be appreciated.
This article looked interesting. I would imagine you could tweak it to do what you were after.
http://kindohm.com/technical/WPF3DTutorial.htm
Also I googled "WPF 3D drawing".
If you have the choice WPF is better suited for graphics than WinForms out of the box. Though a good programmer can make WinForms do similar.

display tooltips to dynamically generated chart

Is there a way to display tooltips on an image that is dynamically created. The image is a dynamically created chart that has multiple points and on mouse over on a specific point I need to show additional information via a popup.
I'm using a web forms .net 4.0 and using the System.Drawing and System.Drawing.Imaging namespaces.
If your only output is a flat image, you could try adding a <map> to your page and set the 'title' attribute of each <area> to your tooltip value.
You can learn more about creating maps here: http://www.w3schools.com/tags/tag_map.asp
Essentially, you're defining regions of your image as hot spots.
If you know exactly where the point is, you could create an image map. But will be cumbersome.
How to make an image map:
http://www.javascriptkit.com/howto/imagemap.shtml
I would recommend that you use a Javascript Charting Library, there are tons of them out there. And there are some good free ones.
We are using Highchart
http://www.highcharts.com/products/highstock
But this is not free.
You can use a image map, but in order to do that, you're going to need the exact coordinates and if you're off by just a little bit, it could be messed up. Have you given any thought to using MS Charting? http://www.microsoft.com/download/en/details.aspx?id=14422
With MS Charting, everything is done on the code behind and it generates an image just as the way you're doing it now. The difference is on the backend, when you create the datapoint, you can set the tool tip and several other properties like this:
DataPoint.ToolTip = "Your Tooltip Here";
If you are unfamiliar with them, there is a ton of documentation and samples online.
Good Luck!

Creating an image containing text with drop shadow using WPF, but inside a ASP.NET web app

Ok, I have a rather strange request.
Due to the inconsistency in how different browsers support text with drop shadow, I was thinking that the text I need with drop shadow (some headers), I could create dynamically on the server side of my web app, and then pass the image to the browser instead of text directly.
I want to use WPF for this, since WPF has a lot of text manipulation built in, and it should be significantly easier to make text with drop shadow in WPF compared to GDI+.
So what I need to do is inside my Web App, create a WPF text element with the drop shadow effect, and save it inside an image (either to disk, or better yes pass it directly to the browser since I actually do not need to store the image since it will be specific for that request only).
I'm hoping for at least some pointers in the right direction :)
I just want to say, since this is unanswered and I don't use WPF that much, GDI+ would actually be pretty easy:
Draw text on image using the desired color of the shadow.
Do a box blur (or Gaussian).
(optional) Create another bitmap and do basically a watermark style draw (this would allow you to set opacity and thus soften the shadow, etc.)
Draw text again using color desired for the text
With that you would have yourself text with a drop shadow. There's about 10 different image processing libraries that make it rather simple (I will sadly do some self promotion and just say that Craig's Utility Library has a draw text function and box blur function in the Utilities.Media.Image.Image class, but there's tons of other packages you could use).

Categories