I have written text on canvas using filltext(). Now in another function i want to retrieve that value as string. If anyone could help me please.
Thanks in advance.
When you write the text to the canvas, also add a custom property to the canvas object containing the text itself. When you want to check it, simply query that property. So:
myCanvas.getContext("2d").filltext(theText,x,y,maxWidth);
myCanvas.addedText = theText;
And later,
var textToCheck = myCanvas.addedText;
This w3c article might be of interest to you:
When an author renders text on a canvas with fillText or strokeText,
they must also add an html element (div or span) with the same text,
styling and position to the canvas subdom. The bounding box of the
text should be set with the setElementPath method (See
http://www.w3.org/wiki/Canvas_hit_testing)
This enables user agents to use the subdom text to deliver an
accessible experience, as the subdom text acts as a proxy for the
rendered text in the bitmap.
And here's an example built for accessibility:
<canvas id="example" width="260" height="200" role="img"> <p>A rectangle with a black border. In the background is a pink circle. Partially overlaying the circle is a green square and a purple triangle, both of which are semi-opaque, so the full circle can be seen underneath.</p> </canvas>
So all you need to do is when the user enters text, store it within a div inside the canvas element.
Related
I'm somewhat new to coding. I currently have a code that creates a canvas for a controlled character to move around. So far I have it where if the character runs into the right border of the canvas, it will move the character to the left of the canvas. However I want to have the background change as well, showing the character has entered a new area. How would I go about doing this? The background is currently made with the use of CSS.
First you need to get your canvas into a variable. If it has an ID, you can use that:
var canvas = document.getElementById("YOUR_CANVAS_ID_HERE");
Then use this code to set the canvas' background color:
canvas.style.backgroundColor = "red";
That should be all you need!
I am wondering if there's a way to access the Bounding Box Gui properties of mask shapes so that I can see how to create perfect circle shape masks in After Effects?
My code is below:
maskpath = app.project.item(1).layer("Orange Solid 2").property("ADBE Mask Parade").property("ADBE Mask Atom").property("ADBE Mask Shape");
Not sure what you mean by "access the Bounding Box Gui properties of mask shapes", but I do think I know what you mean by "how to create perfect circle shape masks in After Effects".
See D. Ebberts' script code posted here: http://aenhancers.com/viewtopic.php?f=11&t=2084
I believe it does (or will lead you to do) what you want.
I found the answer from After-Effects-CS6-Scripting-Guide.pdf page 48
AVLayer sourceRectAtTime() method
Retrieves the rectangle bounds of the layer at the specified time index, corrected for text or shape layer content.
Use, for example, to write text that is properly aligned to the baseline.
app.project.item(index).layer(index).sourceRectAtTime(timeT, extents)
Returns
A JavaScript object with four attributes: [top, left, width, height].
I think you are talking about how to access Left Top Right Bottom values of this window.
This window appears when you click on shape of mask path
(position where pointing hand drown blue color arrow)
please any one can tell me how to access those values via Script
I want to provide text shape to active text object added on Canvas of HTML5.
I have made demo site : http://dstudio.edreamz.in/Sample_tshirt_app/Tshirt_test.htm
I want to apply Curve text effect like
So please tell me what could I use there ?
i need text box inside the canvas. is it possible to draw textbox inside the canvas??
like:
<canvas>
<input type="text">
</canvas>
i dont want answer like this:
<canvas style="background-color:blue;height:100px;width:100px">
</canvas>
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/>
is possible to draw textbox inside the canvas tag using javascript?
No. It's not possible.
If you want text-boxes like this, then your answers are:
use CSS exactly the way you show
make a text-box class, which draws a rectangle and a blinking cursor
keeps track of when it's clicked, using hand-written collision-detection
registers and unregisters keyboard-events when a collision is detected
draws and clears text, based on input
creates a rate-limiter, so that keys don't fire too quickly
listens for "enter" or "backspace" keys, on keyup to add another line, or erase the current text
add an additional click-listener inside the box, when it already has "focus", to try to figure out where the "cursor" (which you invent) should be, in terms of the string, based on the click's detected position within the canvas, compared to the rectangle's position in the canvas, plus the "padding" between the rectangle's starting point and the text's starting point, plus the string's calculated-width
and if the click's X and Y are higher than the rectangle's X, plus the padding before the text starts, but lower than the rectangle's X, plus padding, plus text-width, then you need to loop through and measure the text, character by character, until you find the "best-fit" for where to consider the "cursor" to be, for the next round of editing... which has to function using mouse and keyboard as inputs, of which you have to create and register the events yourself...
That's a LOT of work, compared to CSS.
So technically, yes, you can make something that's like an input box, if you're willing to write what might be hundreds of lines of unminified code, to do the same sort of thing you'd do if you were drawing a mouse/keyboard capable text-box on an empty screen using nothing but C++...
But you can not add DOM elements and make them a part of the canvas, complete with all of their events and natural behaviours.
There are some libraries out there which might help, but I'm not understanding why you'd want to go through all of this work, without a good reason.
Try this site to draw text box component on canvas. Its not CSS or HTML, little javascript.
It explains all about text in canvas.
CanvasInput - HTML5 Canvas Text Input
You can use this library to create a input text field into canvas. It is not sharp as a html/css textbox, but it's a good start.
https://goldfirestudios.com/canvasinput-html5-canvas-text-input
One workaround is this ... I think the following solution works well, although you can't type in the text box inside the Canvas you could use a separate text box and apply that text to the text area within the canvas http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/.
If I create a Label using Raphael, the default style is a black block with white text.
How can I change the background box colour, but not the text colour? I've tried:
paper.label(x, y, value).attr("fill", colour)
but that also fills the text and I end up with invisible text.
I also can't simply change the default colour in this function because I need to have a few different ones depending on a line that it's added to:
As you noticed,
Paper.label(x, y, value).attr(
fill : color
);
changes both the background fill color and the text fill color, resulting in invisible text.
Unspecified correctly explained that this is an array, so each portion must be altered separately, as they illustrated. However, they didn't mention the easiest way to change update both sets of attributes, so I wanted to share this tip. In order to do this, change the attributes into an array with two sets. The first element is the background, and the second is the text.
Paper.label(x, y, value).attr([{
fill : backgroundColor
}, {
fill : textColor
}]);
You can add any other applicable attributes to each part. Here is a working example: http://jsfiddle.net/VzpeG/1/
I was working on a graph similar to this and used:
.attr({fill: "#EF7C4D"})
Let me know how this goes...
var r = Raphael('divID', 320, 220);
text = r.text(100,100,"Hello").attr({fill:"#fff"});
text.label().attr({fill:"#f00"});
Here's a working fiddle http://jsfiddle.net/vpGyL/216/
Set any color on text or on label both apply separately...Hope this helps !
Digging in furthur...Paper.label(x,y,text) is different from Element.label()
If you look at the source code Paper.Label(x,y,text) is a set of rectangle element & text element, so doing .attr({fill:"SomeColor"}) applies to the entire set, hence both rectangle & text share same color(Hence the invisibility).
Oh yeah If you just want to change the text color do this Raphael.g.txtattr.fill = "#yourColorCode" But this changes the text color globally on all the charts and tooltips(don't seem to be a good idea).
While Element.Label as the documentation says is takes the context element & embed in a label tooltip, basically whatever element you use, applying .label will embed it inside a rectangle