Note: This article is a technical exploration without a client to assist page rotation;

Antvis /F2 (Mobile Visualization solution) offers landscape display while I was working recently.

https://antv-f2.gitee.io/zh/examples/creative/case#landscape
Copy the code

A year ago, when I was using ANTVIS /F2 for H5 project development, I also encountered the need for image landscape display. I found the corresponding issue on F2’s official website.

https://github.com/antvis/F2/issues/428
Copy the code

At that time, it was still open, and the requirement of horizontal screen display was quite important. Due to the work schedule, the students on the client side could not provide technical support, so I felt that I could not wait for the developers of ANTVIS /F2 to help deal with it. I read the document again and again, and searched for ideas in the source code. It is similar to the solutions provided by the authorities. Although the official solutions have been provided, I still share my own solutions, so that we can learn from similar problems in the future.

Let’s start with my own solution. The idea mainly relies on antVIS /F2 plug-in mechanism.

https://antv-f2.gitee.io/zh/docs/api/plugin
Copy the code

I think antVIS /F2 plugin mechanism is very powerful, everyone interested, you can delve into it. Back to the point, how exactly does my solution work?

1. Define a set of landscape components that are rotated 90 degrees (using CSS to do the rotation)

$emit(‘horizontalScreen’, true);

3. Indicate whether to use landscape components by passing the rotation field (horizontalScreen)

It’s pretty easy to see the flow here, so you can visualize landscape? Here comes the important point, the image can be landscape, but cannot be landscape operation, we can also see similar questions in the official issue, eg:

Therefore, the focus of landscape visualization is still on “image landscape, but also to maintain the consistency of operation”. Take a closer look at the official documentation “Custom Interaction” and the “showTooltip” API

Custom Interaction

showTooltip

​

We can hijack the coordinates of the touch operation by customizing the interaction, and then use chart.showToolTip to set the new coordinates of the Tooltip. Directly on the code:

Rotation plug-in implementation

Rotation plugin registration

The core of the rotation plugin is the code for the process functions 35 to 40, which takes the values pageX and pageY from Touches [0] and uses the chart.showTooltip API. Set the x value of the tooltip position to pageY and the y value to pageX, and make coordinate corrections to achieve part of the landscape gesture operation, because my project does not involve complex operations and does not need to deal with the complex gestures of PAN, SELECT and Zoom separately.

The final effect is as follows:

In fact, when dealing with the Y value of the code, I directly transferred the value for replacement, because it only involved the horizontal drag (related to the Y value), so the problem was not found. Later, I read the official Y value calculation, and found that a difference value was still needed compared with the Y value in the upper left corner of the landscape screen.

var height = canvas.get('height');
var y = height - point.x;
Copy the code

Chart.landscape (True), the official solution, is fairly simple to use, and the rotation is done internally.

Let me see what the internal code actually does:

landscapePoint

The implementation of 834 ~ 840 is basically the same as my previous implementation; In addition, the government also provides the realization form of landscape function, which realizes user customization to a certain extent.

convertPoints

createEvent

Through the above code, we can analyze that the landscape function is finally realized through judging the landscape when drawing the image.

So let me just conclude. The first solution is to intercept the coordinate value of operation by custom plug-in, and then coordinate with the official API to correct the problem of landscape operation. In the second scheme, the authorities corrected the coordinate values internally by judging the attributes. The core is to do coordinate interception and modification;

Personally, IN terms of technology, I still need to do more in-depth thinking, and many problems can be easily solved. It is necessary to learn about the technical library and framework used. After all, you can also solve problems by yourself.

In addition to the promotion of personal wechat public number, after the irregular summary of some personal work thinking and precipitation, welcome everyone to pay attention to;