Article From:https://segmentfault.com/q/1010000011024263
Question:

Well, I did a project that I wanted to achieve.

This picture shows the human body’s acupoints. The total number is about 300.
When the background gives me data, give me this unusual point, I let his abnormal acupoint light up.

There are only two ways I can understand now, one is to give me 300 pictures, and I am going to walk through different pictures when I show them.
The other one is I use the location to write up, the location must set 300.
Is there any simple way? Let me break through.

Answer 0:

All the point information exists in the front of the front end.jsonIn the array, each acupoint corresponds to oneid,thisidIt is also the key of every acupoint information.Acupoint ID,And then you go throughidGet specific acupoints and operate

Answer 1:

300A point, does this acupoint have a coordinate?
If not, you don’t have to think about it. It is almost impossible to achieve. Even if implementation has a performance problem

If there are coordinates, there will be coordinates when the back ends are returned. You can put the corresponding coordinates to highlight the picture.

Answer 2:

You can use canvas, body pictures as backgrounds, acupoints and wires as primitive canvas drawings based on the data obtained from the background interface.

Answer 3:
  1. SVG

  2. Using usemap

  3. canvas

  4. divAbsolute positioning on a fixed size diagram (DOM)

usemapThe method of use

Answer 4:

I’m writing the back end. I’ll use the back end. My train of thought is this.

300Different points are equivalent to 300 variables, which define the amount of variables you need.

Then bind to the corresponding position of the front page,

Front-end to make judgments, the data is bright, no no special effects.

Given the large number of variables, you can consider writing some loops.

Answer 5:

Without taking into account the response, if it is three-dimensional, it is more reliable to use translate3d positioning. Or you can only use pictures

Answer 6:

canvasSet the picture as the background, and the two-dimensional coordinate system will have coordinates.

Answer 7:

300Take the coordinates of one point, record the ID, and return the problematic acupoint ID back to the background.

Answer 8:

This is not a simple method, the degree map is the key, like the original map, the 300 cut down to do the highlight or what, the corresponding ID, access to ID, postion:absolte seamlessly spliced the 300 degree map into a complete portrait of the human image.The problem of ID show (),

Answer 9:

I think it’s best to use canvas to implement this requirement, but it will be more painful to implement this, need to involve a lot of algorithms. There is another kind of compromise, but it can be used. Suppose you use a div to get the background picture of the human body out, and then every point is one.The only ID, because the position of the body’s acupoint is dead, so you can put all the points in advance in a JSON field, and then tell you the ID at the point in the background that you match the coordinates again. For example, use a span tag to locate it absolutely. If you want to be involved in thatYou have to consider canvas, canvas compatible with IE9 +, and flash if you need to be compatible with low-level browsers

Answer 10:

The background return value must be processed into the form of coordinates that can be used. It can’t be done at the front desk.

Leave a Reply

Your email address will not be published. Required fields are marked *