I'm trying to animate text with RaphaelJS, but I'm encountering a choppy animation ("judder"?). I've looked around for other issues regarding this, but I've only been able to find jQuery-specific or non-SVG topics so far. Please let me know if I overlooked a similar question!
Essentially, I'm attempting to visually wrap a text element in a rect element and translate them simultaneously through an animation. I know about the 'g' element, but I don't want to use it since older versions of Internet Explorer don't support it. Instead, I'm using separate Raphael animations for the text and the rectangle:
var raphRect = paper.rect(
(paperWidth/2)-rectWidth/2
,paperHeight-rectHeight
,rectWidth
,rectHeight
,rectHeight/2
)
...
,raphText1 = paper.text(
paperWidth/2
,paperHeight-(2*fontSize)
,'this is jumpy text?'
)
...
raphRect.animate({y : -rectHeight}, risingTime, 'linear');
raphText1.animate({y : -2*fontSize}, risingTime, 'linear');
I'm assuming that the judder is caused by rounding pixels in each animation frame for the text element. Is there any way to mitigate or prevent this judder? (Reducing the animation time is not an option...and it doesn't even look like it helps.)
(I have an example of what I'm trying to do here. I've included two lines of text and a bold stroke for the rect to emphasize the judder.)
I had the same problem and have tried to differentways to solve it. I have found few hacks that works for me. But they all have the same idea: you should make text not so straight.
"transform" : "R 0.01"
For example, it rotates your text on small angle. Here is the result:
jsfiddle.
I can't garantue that it will work in your browser. In stable Chrome 36 it works good, in beta or canary worse.
You could also try no so straigth font jsfiddle. It works good for FF.
"font-family" : "Comic Sans MS"
Other things worse to be tried:
inreasing font size
using bold font
using a text path
This idea is actually borrowed from Robert Longson's information about the text-rendering property. It's true that Raphael doesn't provide direct access to this functionality, but it does provide you with a link to the dom node -- so it is but a second step to apply this style yourself, and it does indeed produce better results in Firefox at least.
Using jquery:
$(raphText1.node).attr( 'text-rendering', 'geometricPrecision' );
$(raphText2.node).attr( 'text-rendering', 'geometricPrecision' );
Staged here.
Related
Hello everyone so I've been trying to render a book page that is attached to your hand in VR (testing on oculus-go) using A-FRAME. Initially I tried using a plane and applying the text to it using the text attribute and then defining its value, alignment, font etc... Everything worked fine enough however the text gets "jagged edges" that seem to get worse the more you move your hand (which is basically impossible to not do) making it extremely bad for a long text-form such as a book page.
Then I tried exploring an alternative by using the aframe-html-shader by mayognaise. By creating an html div and using css it's the perfect solution in terms of customization, alignment and etc and when I render it, the text doesn't get any "jagged edges" anymore (since it's basically a texture).
However, it gets blurry enough that it becomes tiresome for long reads.
I've tried everything I could to increase its sharpness however it keeps being blurry which makes absolutely no sense to me.
What I've tried:
Increasing the size of the object the texture applies to and then scaling it back after the render - result: same thing...
Increasing the size of the canvas or the texture inside the aframe-html-shader.js - result: the same thing... however some of the tinkering attempts seem to trigger a "image too big (...) scaling down to 4000" (4000 something I don't recall the exact value) which seem to indicate the canvas is already being rendered at full resolution
Switching from Mayognaise aframe-html-shader.js to wildlifela fork (which already has an option of "scale" on the shader) and applying "canvasScale: 2" - result: same thing...
Using a 4000px width html element as the object to render from, increasing the font accordingly- result: same thing...
I'm out of ideas and really don't understand why I can't get good enough text out of the html shader since if the text is within an image and I use that same image as a texture, the text comes out perfectly readable.
Need some help from all the A-Frame experts and developers over here!
Thank you all in advance!
Increasing the size of the canvas or the texture inside the aframe-html-shader.js - result: the same thing... however some of the tinkering attempts seem to trigger a "image too big (...) scaling down to 4000" (4000 something I don't recall the exact value) which seem to indicate the canvas is already being rendered at full resolution
It wasn't too big. This is because textures needs to be a power of two size (e.g., 4096x4096).
The standard text component should be clearest though. A-Frame master branch has a fix to make text look clearer, might help. https://github.com/aframevr/aframe/commit/8d3f32b93633e82025b4061deb148059757a4a0f
I understand and agree with the shift from browser detection to feature detection but it won't help me with this problem: I'm using the Dosis font, whose letters are displayed farther apart by Firefox than by other browsers. Currently, I'm using navigator.userAgent to detect the browser and adjust letter-spacing accordingly. Now, what Firefox feature could help me make this detection?
The first solution that comes to mind is that, if the spaced-out letters result in overall longer text strings than normal, create an invisible <div> somewhere with Dosis text and check its width. This would check for the specific error, not just the browser.
I am working on animating a line graph using d3.js, and have been closely following this example. The code I have written works just like the example...but the bug I am trying to fix is one that is also unfixed in this example. (So going forward, just follow that link to see the bug for yourself)
In Chrome and IE10, the chart works just as it is supposed to. However, in Firefox, the line does not just draw itself from left to right. Instead, the page loads with the line already displayed, then the line erases itself from left to right, and then finally draws itself (again) from left to right like it should have done in the first place.
Also notice that the line drawing is twice as fast on firefox as the other browsers - this means that the issue is with the transition itself: the transition of the stroke-dashoffset property is handled differently by firefox and the other browsers. Specifically, if we remove the transition from the equation, the main difference becomes evident: With stroke-dashoffset set to totalLength, Firefox displays the entire path, as opposed to none of it, like the other browsers do.
So my question is: is this a bug, or is this bad form on my (and duopixel's) part? If the former is the case, does anybody know a workaround or a fix? If the latter, I would be very grateful if you could show me the correct way to do this!
Before asking my question, I have a test page to make it everyone understand my question better. The URL is http://iamthemoon.com/crop/
You can move the red selection.
I like to crop only the area of red selection. I thought it could be done easily in HTML5 canvas, but that was my mistake. First I googled about it 2 days, but I couldn't find a solution. There are many HTML5 based cropping tools, but they only have square selection.
I then looked into PHP GD and imagemagick, but I couldn't find a solution as well.
I looked at the adobe online photoshop, but they're missing free-form lasso tool or free-form selection tool as well.
did anyone see a similar javascript/php/ruby/ or any other web-based technology?
or is this even possible?
just to answer to the question if this is possible.
I had to deal with same problem and took me a (full) weekend to solve it using HTML5 .
Have a look at a demo here.
Hope it helps.
EDIT:
Just a bit of pseudocode:
1.Draw the picture on canvas.
2.Record mouse clicks on canvas.
3.Draw a pattern using the mouse clicks coordinates
4.Fill pattern with original image.
5. Replace original image with pattern.
EDIT:
Source code released https://github.com/netplayer/crop
I'm working on the same subject. My idea now was to draw the opposite polygon(s) and make these transparent using imagecolorallocatealpha.
The polygon is then drawn with imagefilledpolygon. For the client side we will be using predefined images (thus predefined polygons in php). I have come across this as well: http://brittonkerin.com/image_region_selector/irs_demo.html.
Hope this helps somewhat.
http://shedlimited.debrucellc.com/
use html5 to draw the line/ coordinates,
than just use clip() instead of stroke
I'm developing a Vista/Win7 Desktop Gadget that uses a translucent g:background (doc) area with g:text (doc) on top. I'm adding the text via addTextObject (doc), and this all works as expected.
However, I can't figure out how to set that text to bold style. There doesn't seem to be a way to do this directly via the exposed properties that I can see, and I can't use regular text + CSS in this case due to the fact this text is placed onto a g:background object.
I have also tried specifying a bold font directly, such as Arial Bold (doesn't work) instead of Arial (works).
So how can this be done?
Edit: I have tried setting font-weight:bold for both the body and the g:background object that parents my text; no luck.
See Flip Calendar, by Jonathan Abbott. His code is usually well commented so maybe you can get some ideas from that.
EDIT
The source of my information was from the early days of Vista Beta 2 where that was the official word from MS. I also found the following response to a thread on the MSDN forums regarding the Flip Calendar gadget itself:
http://social.msdn.microsoft.com/Forums/en-US/sidebargadfetdevelopment/thread/841e9d5e-32e9-453f-bd0e-dc5a4e607c33/
The gadget has options for setting bold font on the day of the month (a g:text object) but on closer inspection it doesn't work. Sorry about that. The MS guys have been known to be wrong as well on one or more occasions. I can honestly say that I don't use the g:text object.
This means your only (well, non activex route) option is VML text, which provides a lot of flexibility on layout. However, you will have to place it on a fully opaque area of the gadget which is probably why you wanted to use the addTextObject in the first place. Gary Beene's site really helped me out when I was getting started, but it doesn't go into any detail on the v:textbox element and the v:textpath element, though the MSDN documentation goes into enough detail on these.
If you need to place the text on a non-fully opaque area of the gadget, then you could still go the VML route and place an image behind the text that acts as a shadow, starting out fully opaque and fading to fully transparent. This is how Microsoft does text in window title bars with aero enabled.
Alternatively, you could create an ActiveXObject that draws the text you need in the font you want and saves the image to a temporary file in the gadget folder. Then you set that to the src of an addImageObject. I've done something similar in a gadget and it's fast enough not to be noticeable. You can also set min/max dimensions so shrinking/stretching to fit becomes a breeze.