If we use character from other languages like Danish then characters accent gets out of the text box, is there a way to detect if text is overflowing height wise?
My element is wrapped inside g element with clip path.
This is required output
But when we use clip path we don't get if text is overflowing outside clip path
Related
I am having trouble to see an easy to apply solution so that, a Rect can be a container for Text, just like a in Html as a container for a , so that if a div has a border, it will expand with the text as text increase in counts.
I haven't be able to do it through either Rect With Text in a Group or apply Label above a Text...
Is that even doable? If not, what is the alternative that I can somehow let the Rect smartly detect the size of Text in the same Group so it expands accordingly?
I am using Konva by utilizing konva-react
Konva.Label is very useful for that use case.
<Label>
<Tag fill="red" />
<Text text="hello" />
</Label>
Demo: https://codesandbox.io/s/84mzo6l5k0
If you want to use Konva.Rect + Konva.Text you have to calculate the size of the text manually and then apply it to the rectangle instance.
Is there a short way of adding the translate to the text's transform attr without removing the rotation?
currently I add rotation when the text is created:
.attr('transform', rotate(270 xValue, yValue);
Note that this is done in a for loop since there are numerous texts
but later on the user should be able to drag the text horizontally. Dragging one text should move all the texts across. Doing the following removes the rotate attribute from above:
svgContainer.selectAll("text").attr("transform", "translate(" + [tx, ty] + ")");
is there a short way where I can select all the text and just append the translate attr to the rotate? Or do I need to loop through all the Texts and manually change each one?
I have just came to a working solution:
I've placed all the text inside a "g" element. and then translated the "g" element.
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/.
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.
Can I convert text to uppercase when drawing it into the canvas tag?
textTransform="uppercase" doesn't seem to work, and the canvas tag doesn't inherit CSS text-transform:uppercase.
The text is coming from a variable whose contents I don't have control over, so I can't just write it uppercase to start with.
I'm not sure what you mean by don't have control over a variable.
fillText(variable.toUpperCase(), x, y) is what you'd do.