Well, if I draw a line with an odd value of lineWidth in HTML5 Canvas I get a blurred line and I know the reason for this problem.
Now, I want to know the solutions to overcome this. I already know a solution for this and which i couldn't implement now. So, please comment on any other solution for this problem.
My Solution :
If you have to draw a line with an odd numbered width, then you will have to offset the center of your line by 0.5 up or down. That way rendering will happen at boundary of pixel and not in middle, and you will always have a sharp line with no residue at the end edges.
Let me know if any other solutions other than the above
Happily (and Sadly) you have correctly implemented "pixel-snapping" when you add/subtract .5 pixels to get your lines to align with pixel boundaries. Unlike Photoshop, there is no option to automatically pixel snap in canvas. ...I feel your pain!
Related
Ignore padding didn't seem to do anything since no padding existed? I'm really confused here. I do NOT want the red areas. (Please ignore potato colors, I'm just debugging)
Debugging using flash firebug - the dark blue border with the plus in the top left represents the whole of the UITextField inside of my Label component. I was using some other fixes found from around the web regarding how to scale the text properly to fit the container and this is a breaking issue for those fixes.
Does anyone know how to achieve this? I just want to scale my text dynamically when the window is resized and the container resizes as a result.
edit: it's important to note that this label has a scale applied, I can tell that the padding is still there when it's smaller but it's much less noticeable without the scaling
If I have problems like this I debug using FlexSpy.... to inspect the elements, and change properties in real time, very handy for things like this. Maybe that might be of some help...
https://code.google.com/p/fxspy/
Example of FlexSpy running
http://www.mieuxcoder.com/data/2007/12/FlexSpy-1.2/dashboard.html
As far as I Know it isn't possible to get rid of the 2 pixel glutter around the text. For information about the padding arround the text see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextLineMetrics.html
You may use the .textWidth property to find out the with of your text. The exactly position of the text is dependent of the textfield.antiAliasType and the _textfield.gridFitType methods. With _textfield.gridFitType = flash.text.GridFitType.PIXEL The Flash player tries to render the text to pixels. This causing the 2 pixel glutter to vary between 1-3 pixels.
Here is the plunkr
http://plnkr.co/edit/05OtTgW78wibGz57Lrao
When the viewport width variable is set to 1366.
In the plunkr when u move the cursor near the centre u will see the lines are almost gray and is blurred. But when moved near the edges it is crisp and black.
But in the same case when the viewport width is set to 1000 currently it is commented in plunkr. The lines are crisp at all the places, edges , centre.
This scenario applies to all drawing and not only the lines any thing i draw in the centre is bit dull while on the edges it is sharp at certain width of the stage.
Another issue here is eventhough i have specified the vertical lines as dashed it comes as as continuous lines, again this also depends on the viewport height mentioned.
Anyone has any insights on this???
To your second question...
Here's how to get your missing vertical dashed line:
Eliminate viewLinesVert entirely.
Eliminate context.closePath()
And your vertical line will become dashed.
BTW, Firefox doesn't yet support context.setLineDash, so your app fails in FF.
To your first question...
Your lines will become a bit clearer if you use context.lineWidth=1.0.
Yes, I did notice your vertical line becomes slightly blurred at certain positions.
In IE, the blur happens as the vertical line approaches the far right side.
In Chrome, the blur happens more towards the middle and occurs for a much larger area.
Quite frankly, I don't know why, but it's probably due to anti-aliasing of the dashes.
Yes, I did notice your horizontal line is [Ok | Blurred | OK | Blurred] as it moves.
That is definitely due to anti-aliasing of the horizontal line.
I also tried your code in the latest KineticJS version 4.7.2 and the blurs are still present.
However...
When I recreate your code in native canvas (not KineticJS), the blurring does not occur in either the vertical or horizontal line--except when the lines are moving (this is unrelated motion blur).
So.....
Detail your problem and submit a bug report:
https://github.com/ericdrowell/KineticJS/issues?direction=desc&sort=created&state=open
Its just because I used the floating point coordinate in stage width...
Got the answer from the kinetic js community.. thanks
I am trying to get an effect like this:
http://www.welcomeanimations.com/welcome_animated_gifs_rotating_sign_orange_chrome_k_1.htm
I have tried all sorts of things:
Matrix translation/rotation - spins the text around the 'Z' axis, instead of 'Y'
Adding TextField to a sprite, and Sprite.rotationY++: reg. point is upper left corner
Adding to MovieClip - same as above (an article said MovieClip's reg. point was centered).
This should be trivial?!?! Help me stackoverflow, you're my only hope!
So you have to remember, Display objects scale and rotate around their local coordinate system. so when you put a textfield in a sprite, you need to center it in that sprite's coordinate system. And doing that for textfields is annoying because their width/height isn't always accurate but there is trick for that: get visual bounds, but normally you can take half of somethings width and height
I've created a prototype for you on wonderfl so you can see the solution working in action. Click on the blue square to see how the local coordinate system messes with the rotation
Finally as you use thing you might find things not rotating in 3D space quite right, this should be able to fix that.
I'm really struggling to get my head around this... I'm trying to rotate a bunch of SVGs through 90 degrees. There will be one or more of these displayed on the same web page, and I'd like them to more-or-less fill a page each when printed.
I've not generated the SVGs and they are supplied with a strange viewBox setting. The entire thing seems to be contained in a single layer, so if I apply a transform = "rotate(90 0 0)" to that layer, it does indeed rotate -- but it doesn't remain in the viewBox.
I may be getting the terminology wrong, but I've setup a Fiddle with an example of one of the SVGs here.
I'm planning to adjust the attributes using jQuery, which I know works -- I just don't know what to change!
Any help is much appreciated.
The second and third parameters of the rotate operation are the x and y of the center of rotation. Try setting them to the centre point of the viewBox.
I have this background that I'm using for a section, and it starts with a small arrow engraving at the top:
However I'm trying to get it when it repeats to clip out the top arrow part, just leaving the texture in the middle part. I was wondering if it was possible to do it with something like webkit? Thanks
You can't. You need to come up with another method of doing so. There are a number of ways to do this. Personally, I would use only the arrow, but use inner box-shadow for the shadows on everything else. This way you have smaller image being used, and it will always fit the size of the container.
Break up the background image from the pointer and make the two separate sprites. You can get tricky with the pointer and have it point in all 4 directions in the same image. This will allow you to pop up the bubble in all directions from the source.
You can't repeat both x and y on a usable sprite.
I have a maximum of three sprites in my projects.
One for non-repeating elements, another for repeat-x, another for repeat-y.
I find the clip property pretty much useless.