Background img shown as fig 1, requirement
Width cover mobile phone screen and height adaptive
Position number to exact point (like fig 2)
If changing fig 1 to fig 3, i can position the single line text to exact point.
Please take a look in jsbin. But it did not truly solve the problem.
I have no idea how to do if background img just like fig 1. Any other ideas to to this? Thanks.
Fig 1
Fig 2
Fig 3
English is not my native language; please excuse typing errors.
Please forgive me for my unclear expression and thanks for your attention.
Finally, i find a solution by myself.
convert background image (shown as fig 1) to svg
use svg.js to position the things i want to exact point.
Please take a look in jsbin to see what exactly i want to position
I read your post and figured out that you wand something like that
Fig.1 in your background with numbers at their exact location on forground,
like 20 in second line of yellow block of fig.2 and, 0 and 3
in second line of red block of fig.2
well in your code which you gave at jsbin you are using fig.3 and positioning text on it with code
<div class="chance-msg">还有20次机会，分享即可领取红包</div>
<div class="invite-msg">已邀请0人，还差3人，加油</div>
You can do the same thing by using fig.1 and writing only text only numbers in div you only need to position your div by adding margin left or you can use span to write your numbers in or you can just do that for a quick review
<div class="chance-msg"><span style="visibility:hidden">还有</span>20<span style="visibility:hidden">次机会，分享即可领取红包<span></div>
<div class="invite-msg"><span style="visibility:hidden">已邀请</span>0<span style="visibility:hidden">人，还差</span>3<span style="visibility:hidden">人，加油</span></div>
Fig.1 in your background with numbers at their exact location on forground, like 20 in second line of yellow block of fig.2 and, 0 and 3 in second line of red block of fig.2
well in your code which you gave at jsbin you are using fig.3 and positioning text on it with code
还有20次机会，分享即可领取红包
已邀请0人，还差3人，加油
You can do the same thing by using fig.1 and writing only text only numbers in div you only need to position your div by adding margin left or you can use span to write your numbers in or you can just do that for a quick review
还有20次机会，分享即可领取红包
已邀请0人，还差3人，加油
Related
This codepen demo here reads text from a web image URL (Example: here ) which also displays its text position, for example the number 25 is between [178,183] and [193,183] (Highlighted in Green) or [178,172] and [193,183] (Highlighted in blue) which has an overall image size of 513 and 277 as stated in the console. So, I have tried to label these positions using the coordinates highlighted on image in another demo here, but it seems like the bbox (boundary box) or the baseline are all out of position is shown in my images below. I am trying to highlight text on the image which was read by the OCR using a red rectangle. May I ask how to resolve this issue so that the text are highlighted perfectly and not out of position? Any help will be appreciated :).
I have made sure the image in my demo is scaled to the correct sizes as stated by the console.
<div id="reddot-container">
<img src="https://i.ibb.co/T8ZhGjr/num.jpg" alt="Map" class="img-fluid" width="513px" height="277px">
</div>
This codepen demo here reads text from a web image URL (Example: here ) which also displays its text position, for example the number 25 is between [178,183] and [193,183] which has an overall image size of 513 and 277 as stated in the console. So, I have tried to label these positions on image in another demo here, but it seems like the bbox (boundary box) is out of position is shown in my images below. I am trying to highlight text on the image which was read by the OCR using a red rectangle. May I ask how to resolve this issue so that the text are highlighted perfectly and not out of position? Any help will be appreciated :).
I have made sure the image in my demo is scaled to the correct sizes as stated by the console.
<div id="reddot-container">
<img src="https://i.ibb.co/T8ZhGjr/num.jpg" alt="Map" class="img-fluid" width="513px" height="277px">
</div>
I have a group of elements that are masked by a rect in SnapSVG and I want to translate the elements, bringing new ones into view (and hiding ones that are currently in view). The code is really simple - here's a codepen: http://codepen.io/austinclemens/pen/ZbpVmX
As you can see from the pen, box1, which starts outside the mask element (clip) should cross through it when animated, but it never appears. Moreover, box2, which should move out of the clipping area, remains visible.
This example seems to do a similar thing and has no problems: http://svg.dabbles.info/snaptut-masks2
Here's the code from codepen:
var t = Snap('#target')
var clip=t.rect(200,200,200,200).attr({fill:'#fff'})
var box1=t.rect(300,100,50,50).attr({fill:'#000'})
var box2=t.rect(300,300,50,50).attr({fill:'#000'})
var boxgroup=t.group(box1,box2)
boxgroup.attr({mask:clip})
boxgroup.animate({transform:'t100,300'},2000)
I notice that the svg.dabbles examples translates the clip region by 0,0 at one point, but adding something like that doesn't seem to get me anywhere.
Ok, I figured this out thanks in part to this really great article about SVG transforms: http://sarasoueidan.com/blog/svg-transformations/
The upshot is that when I translate the box group, it takes the mask with it. This is a little confusing to me still - I guess the mask attribute is causing this somehow? Anyways, the solution is to apply an opposite translation to the mask to keep it in place. Check the pen to see it in action but basically I just had to add:
clip.animate({transform:'t-100,-300'},2000)
The tricky part of this is that you now need to synchronize the movement of the mask and the movement of the box group.
edit - I now demonstrate how synchronization can be achieved using snap's set.animate method on the codepen.
i have this "Time line", its horizontal it goes like this
00|01|02|03|etc up to 23
Every span that contains a number is 17 pixels, and the "|" line is 1 pixel, the whole image is 431x20 pixels.
I have 2 tags, the user is supposed to pick a "Start" time and a "End" time, i want to know how i can color the image partially using javascript, i am thinking i could put some CSS over it, such as over the image, but i have no idea how to do this using javascript, any help would be greatly apriciated.
It strikes me as fairly simple to absolutely position a DIV on top of your image, with the same height, whatever color you choose, and some appropriate opacity, setting its left edge to (and this is a quick calculation and might be wrong) image.left + (18 * from), and its width to 18 * (to - from + 1) - 1.
But is there a great reason to make your timeline an image in the first place? It sounds even better to me to have a collection of nodes that either have or don't have a "selected" class, each with a "00" - "23" text marker on them. No images needed.
I have a (fixed-width and height) label which sums up a long list of selection criteria, and the specs say that, if label content exceeds 2 lines # 400px, it should be trimmed, an ellipse should be added, and the rest should be displayed in a hovered div on mouseover, à la tooltip. I'd like some advice on which is the best way to pick the trim point.
So far, I only have two ideas, and I'm not terribly happy with either of them:
I guesstimate truncation, based on content length; I find this is particularly unwise, since (1) I'm using proportional fonts, and (2), this being a two-line text, wraparound can easily make a mess of it.
I use a second, hidden label, and get width in javascript. Slightly better, but would disagree with wraparound, since the hidden label would be 1 line only.
Whatever solution I end up implementing, I'll probably have to do this strictly in JavaScript.
Is it not possible to hide a label and then set its width to 400px?
Then you could just measure height on the hidden label, and keep removing letters until its down to only two lines, the would give you the number of letters to keep in the original label.
But maybe styling goes out the window when the label is hidden? Im not sure.