This question already has answers here:
JavaScript and SVG: how do you increase the clickable area for an onClick event?
(2 answers)
Closed 8 years ago.
I have a SVG Drawing, I want to click the lines on it. That works fine, if you hit the sometimes realy thin guy.
Does anybody have an idea, how to make the line clicking easier - without just enlarging "stroke-width"?
I tried using two lines (one white thicker one black thin), but then the rendering order destroys parts of the drawing.
any idea?
Draw two lines, one the one you want to see and another thicker i.e. with a stroke-width but with visibility="hidden" and then treat clicks on the hidden line as clicks on the visible line. You may need to adjust the pointer-events property to disable it for the visible line (pointer-events="none") and enable it for the hidden line (pointer-events="all")
one simple trick (in addition to above) is, use an other cursor in css of this element, eg: 'pointer', so your cusomers get a chance to "feel" if they are "above" the line
Related
so I have a drawing program and I need to implement a "broken line", it is an SVG line with two another lines in the middle of this line, these two line needs to cross perpendicularly to the principal line, maybe this picture can help me to explain the problem:
This line can be drawn in any angle that the user choose
I don't really understand svg's so I'm having a lot of trouble implementing this.
Thank you
So I discovered one way to implement that using polylines and calculating the middle of the source and target coordinates, so when it changes I change the middle point too. After that, I created a marker-mid with the double lines.
Has anyone figured out a way to dynamically mutate text on the screen without triggering a render?
A large part of my screen utilizes setNativeProps for moving parts, meaning that the animations become lagged despite using shouldComponentUpdate. I would like to use the Text tag instead of the TextInput tag workaround suggested in this post for stylistic reasons.
Best case scenario is a workaround that involves setNaiveProps as it would follow the pattern of the rest of the screen; however, I currently plan to render all the numbers 0-9 on the screen an move them into place at the moment, so any help would be greatly appreciated!
As it turns out, you can actually format TextInputs the same exact way as Text elements (from what I have tested). For placing text horizontally, you have to set the width (something I had trouble with before). For those still interested in the original question however, you can nest TextInputs inside of a Text Element (one per text element because there is no justification and it automatically places them in a row). Styling applied to the Text Element will apply to the TextInput.
I'm new to svg and raphael.js. My task is to make an interactive graph--the user clicks/touches a line and space opens to show some text elements. I have this working but the line is a very small target.
Is there a way to have the user click the bounding box instead of the path? I see getBBox() but don't see how I could use this for that purpose.
One thing you could do is clone your path, push it back behind the line your interested in, change the attributes so that it's much thicker, and almost entirely transparent, and put your event handlers on this line.
Something like this
You'll have to clean it up of course...
Draw a thik line of the same background color behind this line and use that as the target.
You can use pointer-events="boundingBox" on the element you want to capture mouseevents on. See the SVG Tiny 1.2 spec.
Here's an example.
Unfortunately I don't think most browsers support it yet. Opera does though.
I have a view that draws multicolored text inside UITableViewCell. To draw multicolored text I'm using NSAttributedString However, I would like to make it so that if the text is too long to fit into the view, the last visible line is truncated to display an ellipsis at its end.
Obviously this is very easy to do when drawing only a single line, as you can just set
kCTLineBreakByTruncatingTail for the line break mode of the paragraph style. The problem is that I want my text to wrap to fill the rectangle, and then only have the last line truncated with an ellipsis - setting the line break mode confines the whole text to one line.
Does anybody have any ideas of how I would go about this?
Many thanks in advance for any suggestions,
JC.
Create your CTFrame from your CTFrameSetter with the rectangle of your UITableViewCell. Then, you can get all the CTLines of your CTFrame and determine when they will cut off. To swap out the ellipsis, you could keep that drawn with a separate CTFrame and draw it over the overflowing text on the last line.
You can find working code here: https://stackoverflow.com/a/14612598/473067
It's a similar approach to what Heath suggested. But then all wrapped up in a shiny package.
Well, to activate text truncating in UILabel, you should re-set lineBreakMode parameter to NSLineBreakByTruncatingTail after setting attributedText.
textLabel.attributedText = attributedText;
textLabel.lineBreakMode = NSLineBreakByTruncatingTail;
I'm using LaTeX and I would like to have vertical rule along left side of page, topmargin to bottommargin, 0.5in from the left edge of the page. I want this on every page, so I assume that means it must somehow be tied to the header or the footer?
I've made no progress at all, so I need help with (1) making the full-length rule itself and (2) making it happen automatically on every page of the document.
Can someone tell me how to do that?
I got a working answer to my question on the Latex Community forum: http://www.latex-community.org/forum/viewtopic.php?f=5&t=9072&p=34877#p34877
The answer I got uses the 'Background' package and this code:
\documentclass{article}
\usepackage{background}
\usepackage{lipsum}% just to generate filler text for the example
\SetBgScale{1}
\SetBgAngle{0}
\SetBgColor{black}
\SetBgContents{\rule{.4pt}{\paperheight}}
\SetBgHshift{-9cm}
\begin{document}
\lipsum[1-90]
\end{document}
Works great and was easy to adjust to put one vrule in left margin area and one in the right margin area.
There could be a LaTeX package to do this for you, but I'm more of a TeX person, so I tried to come up with a TeX solution (not always the best idea to mix plain TeX with LaTeX but I think I have it working).
Try this. Box 255 is the box register that TeX places the page contents into before the page is output. What I've done is taken the existing output routine, and changed it to insert into box 255: a 0-height, 0-width infinitely shrinkable-but-overflowing set of boxes containing a rule that is the height of the page, 0.4pt thick and with any luck, half an inch away into the left. The existing contents of box 255 is then added after this rule. Then I call the previous output routine which outputs the page (which now includes a rule), and also the headers and footers.
\newtoks\oldoutput
\oldoutput=\expandafter{\the\output}%
\output{%
\setbox255\vbox to 0pt{%
\hbox to 0pt{%
\vsize\ht255%
\vbox to \ht255{%
\vss
\hbox to -0.5in{%
\hss
\vrule height \ht255 width 0.4pt%
}%
}\hss
}\vss
\box255%
}%
\the\oldoutput
}%
Put it before your \begin{document} command. This might not solve your problem completely, but hopefully it should get you started. Here's a great page for learning about TeX primitives and built-in things.
Have a look at the eso-pic package. From memory, what you want would look like this:
\AddToShipoutPicture{%
\setlength\unitlength{1in}%
\AtPageUpperLeft{%
\put(0.5,\topmargin){\vrule width .5pt height \textheight}%
}%
}
It's not clear in your question if you want the line to span the text area or the whole paper height. Depending on the case, you have to replace \topmargin and \textheight by the correct values, either 0pt or whatever your top margin is, or by \paperheight. See the geometry package if you don't already use it for how to control those dimensions.