Is it possible to somehow make "find" (ctrl+f) work if you are writing text inside a Canvas?
I checked out the basic examples at https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text and when searching for "hello world" in chrome the canvas text is not hilighted.
Is there anyway of doing this?
If there isn't, has anyone seen an implementation of a "box-and-lines" chart (like UML) only using the DOM? (since then native find text would be supported)
Html5 Canvas paints text on its canvas -- the text you see is an inaccessible set of pixels arranged in the shape of letters, so Ctrl-f will not find the text. If you want searchable text you can use CSS to place html divs over the canvas and set their content to your desired text. Then Ctrl-f will find it. You can set pointer-events: none on the div so it doesn't catch events you intend for the canvas.
One wild (and not recommended) workaround is to put an element off-screen containing all your text. When Ctrl-f finds something in that element, you can fetch the selected text and calculate where you painted that same selected text on the canvas. Then you can redraw the selected text on the canvas as white-on-blue text to indicate that it was "found". This wild workaround is totally not recommended, but it would probably work
Related
I am evaluating fabricjs and wondering if you can dynamically add text to shapes while you are zooming. So for example while zoomed out, the shapes are too small to show the text but as you zoom and they get to a certain size, the text can be shown. Or is this part of the base control? In other words if I add text to an object but it cannot be shown because it is too small it automatically hides?
I've been using a combination of Illustrator, Sketch, Inkscape, and Peter Collingridge's svg-editor to create and manipulate SVG's, but I've been running into a few issues. I am trying to create a basic logo using text, and when the logo appears on the page I would like to animate the outside border (with a drawing effect), and then fill the centers with a solid color.
In Illustrator and Sketch, I started with a basic text box and converted the layer to outlines, but my exported SVG's only contain a single path without the stroke and stroke-width fields. It just looks something like this: <path fill="#FFF" d="…"/>, with alot of markup in the d='' field.
I read up and learned Inkscape exports some of the cleanest SVG's, so imported a PNG of my initials, "traced a bitmap image" and the "ungrouped the layers" per this demo. This exported a multi-path svg, but each still lacked the stroke and stroke-width params. This is the closest I've come so far to animating it: codepen.io/pcooney10/pen/PPvGrx, and it also contains the actual SVG code.
I have a few questions, hopefully some people over here can help:
How can I create/export SVG's that contain stroke, stroke-width, stroke-dasharray, and stroke-dashoffset fields? These params seem to unlock a lot of animation functionality,and my paths only seem to have fill='' and d=''.
Generally, what's the best tool for creating SVG's? It seems Inkscape exports the cleanest SVG code, but it's not as easy to maneuver as Sketch and Illustrator. Peter Collingridge's svg-editor seems to be the best for slimming down the code, but it doesn't remove all of the styling that Sketch and Illustrator embed in the file.
You complain of your SVG as containing "d" operations. But this is a powerful notation which draws your letters! You can use this as a start for animation.
Idea: just use Inkscape.
Enter your text. Make it just the way you wish it to appear. Click Menu > Path > Object to Path. This converts it from font-based to vector-based.
Click Save As... and choose the plain SVG format.
I have a view designed for printing which includes a watermark, a transparent view which draws some text atop the other content.
When printing and using the Mac OS Save as PDF feature, the watermark text is selectable. Sometimes this interferes with selecting the other content, other times it's just distracting.
How can I make the text not selectable in the generated PDF?
I tried drawing the watermark behind the other content instead of in front. It didn't prevent selecting the watermark, but kept it out of the way of the other content. However, the table view rows occluded the watermark, which of course is worse.
Commenter asked for code, so here's some code which prepares the view:
// self.view is the print view
// watermark is an instance of WatermarkBackground, an NSView
if (watermark) {
watermark.frame = self.view.frame;
[self.view addSubview:watermark positioned:NSWindowAbove relativeTo:nil];
}
And the line in [WatermarkBackground drawRect] which does the drawing:
// _message is an NSString
// textAttributes returns a dictionary with a color and font
[_message drawWithRect:textRect
options:NSLineBreakByWordWrapping
attributes:[WatermarkBackground textAttributes]];
I meant to post this screenshot originally:
One option would be to create one or multiple CGPaths from your string and draw those into the PDF instead. One way to do so would be to use CTFontCreatePathForGlyph, but it's actually quite a lot of work to do this for entire strings, Core Text does help, but it's a pretty low-level framework.
If you're always drawing the same watermark, it would be much easier to create a static PDF in some vector graphics app and use that with CGPDFPageDraw etc. Illustrator has a "Convert to Paths" command for text objects.
As far as I know, there in no way to make text unselectable in PDF. Probably the best solution would be to use an image watermark instead.
However, if it is in front of text, it can make background text difficult to select. If it is behind everything, there will be same issues with obscuring it with tables. So, possibly a better plan of action would be not to try to make text unselectable, but rather make table background transparent. Then, use image watermark.
Taking an idea from omz, instead of using CGPaths and generating them on the fly, the simplest, most elegant solution would be this:
Create a vector watermark by typing the text in a vector editor and expanding text to create outlines.
Save it as SVG or PDF.
Then, put this new vector graphic on top as a watermark. It will not be selectable, will not obscure the view, and will not be obscured by tables.
We have an Adobe AIR application. It has an image preview feature to show TIF and JPG images inside a TitleWindow.
My requirement is as follows:
i want to highlight(yellow color) a line containing a searched term results inside that image.
i found out examples which can highlight text inside a textarea. But wanted the same thing inside image.
There can be multiple lines having this keyword. All those llines have to be highlighted.
Not sure if this is possible. Please let me know how can this be done in Flex/AIR.
Create mx.controls.Text, assign style which will paint it yellow and place over the Image. This can be done, for example, with Canvas container which allows absolute positioning.
mx:Text has no background, so it will just text over image. Or do you need some background as well?
In flex, I have HBox in which I have loaded an image. I want to wrap text around it. Hence, there would be an image on right and text will be on left. After the image is cleared, text will be displayed 100% of the width.
How can I achieve it?
Although what you describe is easy to do with HTML. I didn't think the htmlText property in Flex supported anything more than simple HTML.
You'll want to look into the Text Layout Framework for Flex.
Edit: Despite my initial claim, the htmlText property actually does support the img tag with align property. It is documented here