CN113961158A - Cross-platform painting brush synchronization method and device - Google Patents
Cross-platform painting brush synchronization method and device Download PDFInfo
- Publication number
- CN113961158A CN113961158A CN202111050575.0A CN202111050575A CN113961158A CN 113961158 A CN113961158 A CN 113961158A CN 202111050575 A CN202111050575 A CN 202111050575A CN 113961158 A CN113961158 A CN 113961158A
- Authority
- CN
- China
- Prior art keywords
- canvas
- height
- layer
- width
- control
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 62
- 238000010422 painting Methods 0.000 title claims description 120
- 230000000694 effects Effects 0.000 claims abstract description 20
- 238000012545 processing Methods 0.000 claims description 36
- 238000004590 computer program Methods 0.000 claims description 13
- 239000003550 marker Substances 0.000 abstract description 22
- 238000004891 communication Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 7
- 238000005259 measurement Methods 0.000 description 5
- 239000000463 material Substances 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000003973 paint Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
- G06F3/1454—Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- General Engineering & Computer Science (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a cross-platform brush pen synchronization method and a cross-platform brush pen synchronization device, wherein the method comprises the following steps: placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a second terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer; determining a first brush coordinate of the brush layer based on a brush operation of a user, and sending the first brush coordinate and the total number of pixels of the first screen width and the first screen height to a server so that a second terminal receives the first brush coordinate and the total number of pixels of the first screen width and the first screen height forwarded by the server. The method realizes the display effect that the paintbrush accurately draws the same marker at different terminals.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a cross-platform brush pen synchronization method and device.
Background
In the process of online watching rooms, the broker, the client and the attendant broker watch the same material content, and explain cell pictures, room pictures or house type pictures to the client through voice. Due to the fact that the number and the positions of the markers on the pictures are large, the number and the positions of the markers on different pictures are inconsistent, a broker and a customer hardly pay attention to the same markers, the customer can only be guided to pay attention to the markers on the pictures through voice, and communication efficiency is low, so that a painting brush is usually used for positioning the target markers to improve communication efficiency. However, the disparity in understanding is caused by the fact that stroke synchronization cannot be accurately displayed on the same marker due to the inconsistency in the interface standard metrics used by android, IOS and applets on three sides.
Disclosure of Invention
The invention provides a cross-platform painting brush synchronization method, which is used for solving the defect that painting brushes in the prior art cannot be accurately synchronized and realizing the effect that multi-end painting brushes accurately paint the painting brushes on the same marker.
The invention provides a cross-platform brush pen synchronization method, which is used for a first terminal and comprises the following steps:
placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a second terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer;
determining a first brush coordinate of the brush layer based on a brush operation of a user, and sending the first brush coordinate and the total number of pixels of the first screen width and the first screen height to a server so that a second terminal receives the first brush coordinate and the total number of pixels of the first screen width and the first screen height forwarded by the server.
According to the cross-platform brush pen synchronization method provided by the invention, the first placement standard comprises a first edge distance scaling multiple of a control edge distance relative to a first screen width and height total pixel number, and the first width and height setting standard comprises a control scaling multiple of a control height and/or a control width relative to the first screen width and height total pixel number;
the step of placing the UI control on the UI control layer based on the first placement standard and/or the first width and height setting standard comprises the following steps:
determining a control edge distance based on a first screen width, height and total pixel number of a first terminal and a first edge distance scaling multiple;
determining the height and/or width of a control based on the total number of pixels of the first screen width and the height of the first terminal and the zoom factor of the control;
and placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
According to the cross-platform brush pen synchronization method provided by the invention, the second placement standard comprises a second edge distance scaling multiple of the canvas edge distance relative to the total pixel number of the first screen width, and the second width and height setting standard comprises a canvas scaling multiple of the canvas height and/or the canvas width relative to the total pixel number of the first screen width;
the canvas is placed on the canvas layer based on a second placement standard and/or a second width and height setting standard, and the canvas placement method comprises the following steps:
determining the canvas edge distance based on the total pixel number of the first screen width and the height of the first terminal and the scaling multiple of the second edge distance;
determining the canvas height and/or the canvas width based on the total number of pixels of the first screen width and the canvas scaling factor of the first terminal;
placing a canvas on the canvas layer based on the canvas edge distance, the canvas height, and/or the canvas width.
The invention provides a cross-platform brush pen synchronization method, which is used for a second terminal and comprises the following steps:
placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a first terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer;
receiving a first painting brush coordinate and a first total pixel of screen width height transmitted by a first terminal and forwarded by a server, and drawing strokes in a painting brush layer based on the first painting brush coordinate, the first total pixel of screen width height and a second total pixel of screen width height of a second terminal;
and processing the UI control and the canvas which are placed on the UI control layer and the canvas layer in a standard mode based on the strokes, and displaying the painting brush effect on the second terminal.
According to the cross-platform brush pen synchronization method provided by the invention, the first placement standard comprises a first edge distance scaling multiple of a control edge distance relative to a second screen width and height total pixel number, and the first width and height setting standard comprises a control scaling multiple of a control height and/or a control width relative to the second screen width and height total pixel number;
the step of placing the UI control on the UI control layer based on the first placement standard and/or the first width and height setting standard comprises the following steps:
determining a control edge distance based on a second screen width and height total pixel number of a second terminal and a first edge distance scaling multiple;
determining the height and/or width of a control based on the total number of pixels of the second screen width and the height of the second terminal and the zoom factor of the control;
and placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
According to the cross-platform brush pen synchronization method provided by the invention, the second placement standard comprises a second edge distance scaling multiple of the canvas edge distance relative to the total pixel number of the second screen width, and the second width and height setting standard comprises a canvas scaling multiple of the canvas height and/or the canvas width relative to the total pixel number of the second screen width;
the canvas is placed on the canvas layer based on a second placement standard and/or a second width and height setting standard, and the canvas placement method comprises the following steps:
determining the canvas edge distance based on the total pixel number of the second screen width and the height of the second terminal and the scaling multiple of the second edge distance;
determining the canvas height and/or the canvas width based on the total pixel number of the second screen width and the canvas scaling factor of the second terminal;
placing a canvas on the canvas layer based on the canvas edge distance, the canvas height, and/or the canvas width.
According to the cross-platform painting brush synchronization method provided by the invention, a first painting brush coordinate and a first total number of pixels of screen width and height transmitted by a first terminal and forwarded by a server are received, and based on the first painting brush coordinate, the first total number of pixels of screen width and height and a second total number of pixels of screen width and height of a second terminal, a stroke is drawn in a painting brush layer, and the method comprises the following steps:
receiving a first painting brush coordinate transmitted by a first terminal and a first screen width, height and total pixel number of the first terminal, which are forwarded by a server;
converting the first brush coordinate into a target brush coordinate based on the total pixel number of the first screen width and the height of the first terminal and the total pixel number of the second screen width and the height of the second terminal;
and drawing strokes in the brush layer based on the target brush coordinates.
The invention also provides a cross-platform brush pen synchronizing device, which is used for a first terminal and comprises:
the first processing unit is used for placing a UI control in a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas in a canvas layer based on a second placing standard and/or a second width and height setting standard, and processing the same along with a second terminal, wherein the first terminal and the second terminal use the UI control layer, the canvas layer and a painting brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the painting brush layer is positioned at the top layer;
and the second processing unit is used for determining a first brush coordinate of the brush layer based on the brush operation of the user and sending the first brush coordinate and the total number of pixels of the first screen width and the first screen height to the server so that the second terminal receives the first brush coordinate and the total number of pixels of the first screen width and the first screen height forwarded by the server.
According to the cross-platform painting brush device provided by the invention, the first placement standard comprises a first edge distance scaling multiple of a control edge distance relative to a first screen width and height total pixel number, and the first width and height setting standard comprises a control scaling multiple of a control height and/or a control width relative to the first screen width and height total pixel number;
the first processing unit is further configured to:
determining a control edge distance based on a first screen width, height and total pixel number of a first terminal and a first edge distance scaling multiple;
determining the height and/or width of a control based on the total number of pixels of the first screen width and the height of the first terminal and the zoom factor of the control;
and placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
According to the cross-platform painting brush device provided by the invention, the second placement standard comprises a second edge distance scaling multiple of the canvas edge distance relative to the total pixel number of the first screen width, and the second width and height setting standard comprises a canvas scaling multiple of the canvas height and/or the canvas width relative to the total pixel number of the first screen width;
the first processing unit is further configured to:
determining the canvas edge distance based on the total pixel number of the first screen width and the height of the first terminal and the scaling multiple of the second edge distance;
determining the canvas height and/or the canvas width based on the total number of pixels of the first screen width and the canvas scaling factor of the first terminal;
placing a canvas on the canvas layer based on the canvas edge distance, the canvas height, and/or the canvas width.
The invention also provides a cross-platform painting brush synchronizing device, which is used for a second terminal and comprises:
the first processing unit is used for placing a UI control in a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas in a canvas layer based on a second placing standard and/or a second width and height setting standard, and processing the same along with a first terminal, wherein the first terminal and the second terminal use the UI control layer, the canvas layer and a painting brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the painting brush layer is positioned at the top layer;
the second processing unit is used for receiving a first painting brush coordinate and a first total number of screen width and height pixels which are transmitted by the first terminal and forwarded by the server, and drawing strokes in a painting brush layer based on the first painting brush coordinate, the first total number of screen width and height pixels and a second total number of screen width and height pixels of the second terminal;
and the third processing unit is used for processing the UI control and the canvas which are placed on the UI control layer and the canvas layer in a standard mode based on the strokes and displaying the painting brush effect at the second terminal.
According to the cross-platform painting brush device provided by the invention, the first placement standard comprises a first edge distance scaling multiple of a control edge distance relative to the total pixel number of the second screen width and the height, and the first width and height setting standard comprises a control scaling multiple of a control height and/or a control width relative to the total pixel number of the second screen width and the height;
the first processing unit is further configured to:
determining a control edge distance based on a second screen width and height total pixel number of a second terminal and a first edge distance scaling multiple;
determining the height and/or width of a control based on the total number of pixels of the second screen width and the height of the second terminal and the zoom factor of the control;
and placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
According to the cross-platform painting brush device provided by the invention, the second placing standard comprises a second edge distance scaling multiple of the canvas edge distance relative to the total pixel number of the second screen width, and the second width and height setting standard comprises a canvas scaling multiple of the canvas height and/or the canvas width relative to the total pixel number of the second screen width;
the first processing unit is further configured to:
determining the canvas edge distance based on the total pixel number of the second screen width and the height of the second terminal and the scaling multiple of the second edge distance;
determining the canvas height and/or the canvas width based on the total pixel number of the second screen width and the canvas scaling factor of the second terminal;
placing a canvas on the canvas layer based on the canvas edge distance, the canvas height, and/or the canvas width.
According to the cross-platform brush device provided by the invention, the second processing unit is further configured to:
receiving a first painting brush coordinate transmitted by a first terminal and a first screen width, height and total pixel number of the first terminal, which are forwarded by a server;
converting the first brush coordinate into a target brush coordinate based on the total pixel number of the first screen width and the height of the first terminal and the total pixel number of the second screen width and the height of the second terminal;
and drawing strokes in the brush layer based on the target brush coordinates.
The present invention also provides a computer program product comprising computer programs/instructions which, when executed by a processor, implement the steps of the cross-platform brush synchronization method as described in any of the above.
The present invention also provides a non-transitory computer readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of the cross-platform brush synchronization method as described in any of the above.
The invention also provides an electronic device, which comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the processor executes the program to realize the steps of the cross-platform brush synchronization method.
According to the cross-platform painting brush synchronization method and device, the UI control and the painting brush are placed by respectively using the unified placement standard and/or the width and height setting standard on the UI control layer and the painting brush layer of different terminals, so that the relative positions of the UI control and the painting brush in different terminal interfaces are consistent, the painting brush coordinate and the total number of pixels of the screen width and the height of the painting brush layer are transmitted between different terminals, the same painting brush is drawn on the painting brush layer of each terminal according to the painting brush coordinate and the total number of pixels of the screen width and the height, the problem that the painting brush synchronization cannot be accurately displayed on the same marker due to the fact that the standard measurement of the interfaces used by different terminals is inconsistent is solved, the understanding difference is caused, and the display effect of accurately drawing the same marker on different terminals is achieved.
Drawings
In order to more clearly illustrate the technical solutions of the present invention or the prior art, the drawings needed for the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and those skilled in the art can also obtain other drawings according to the drawings without creative efforts.
FIG. 1 is a flowchart illustrating a cross-platform brush synchronization method according to an embodiment of the present invention;
FIG. 2 is a second flowchart illustrating a cross-platform brush synchronization method according to the present invention;
FIG. 3 is a third flowchart illustrating a cross-platform brush synchronization method according to the present invention;
FIG. 4 is a schematic diagram of a placement UI control provided by the present invention;
FIG. 5 is a fourth flowchart illustrating a cross-platform brush synchronization method according to the present invention;
FIG. 6 is a schematic illustration of a placement canvas provided by the present invention;
FIG. 7 is a fifth flowchart illustrating a cross-platform brush synchronization method according to the present invention;
FIG. 8 is a sixth flowchart illustrating a cross-platform brush synchronization method according to the present invention;
FIG. 9 is a seventh flowchart illustrating a cross-platform brush synchronization method according to the present invention;
FIG. 10 is an eighth flowchart illustrating a cross-platform brush synchronization method according to the present invention;
fig. 11 is a schematic structural diagram of a cross-platform brush synchronizer according to the present invention;
fig. 12 is a second schematic structural diagram of a cross-platform brush synchronizer according to the present invention;
fig. 13 is a schematic structural diagram of an electronic device provided by the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings, and it is obvious that the described embodiments are some, but not all embodiments of the present invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Fig. 1 is a flowchart illustrating a cross-platform brush synchronization method (for a first terminal) according to an embodiment of the present invention, where as shown in fig. 1, the method includes:
Specifically, a broker or a client uses Android, ios or applets to see the same material content, explains a cell picture, a room picture or a floor plan to the client through voice, and generally uses a painting brush to locate a target marker to improve communication efficiency. However, the disparity in understanding is caused by the fact that stroke synchronization cannot be accurately displayed on the same marker due to the inconsistency in the interface standard metrics used by android, IOS and applets on three sides. In order to achieve the effect that paintbrushes on different terminals can accurately draw the same marker, the UI control layer, the canvas layer and the paintbrush layer are used on the terminals, and a unified control placing standard and/or a control width and height setting standard, a canvas placing standard and/or a canvas width and height setting standard are defined for the UI control layer and the canvas layer of different terminals respectively, so that the relative positions of the UI control and the canvas in different terminal interfaces are consistent.
And 120, determining a first brush coordinate of the brush layer based on a brush operation of a user, and sending the first brush coordinate and the total number of pixels of the first screen width and the first screen height to a server, so that a second terminal receives the first brush coordinate and the total number of pixels of the first screen width and the first screen height forwarded by the server.
Specifically, as shown in fig. 2, a user draws a stroke in any terminal, and sends the brush coordinates of the brush layer and the total number of pixels of the first screen width and height of the current terminal to the server, so that other terminals obtain the data from the server and draw the same stroke in the respective brush layers. The UI control layer, the canvas layer and the painting brush layer are overlapped, so that a broker and a client can see the display effect that the painting brush is synchronously displayed on the same marker on different terminals, even if the broker and the client can accurately distinguish pictures with dense markers, the understanding difference can not be caused.
According to the cross-platform painting brush synchronization method, the UI control and the painting brush are placed by respectively using the unified placement standard and/or the width and height setting standard on the UI control layer and the painting brush layer of different terminals, so that the relative positions of the UI control and the painting brush in different terminal interfaces are consistent, the painting brush coordinate and the total number of pixels of the screen width and the height of the painting brush layer are transmitted between different terminals, the same painting brush is drawn on the painting brush layer of each terminal according to the painting brush coordinate and the total number of pixels of the screen width and the height, the problem that due to the fact that interface standard measurements used by different terminals are not consistent, the painting brush cannot be accurately displayed on the same marker, understanding difference is caused is solved, and the display effect that the painting brush accurately draws the same marker on different terminals is achieved.
Further, in an embodiment of the present invention, the first placement criterion includes a first edge distance scaling factor of the control edge distance relative to the first total number of screen width height pixels, and the first width height setting criterion includes a control scaling factor of the control height and/or the control width relative to the first total number of screen width height pixels. Placing the UI control on the UI control layer based on the first placement standard and/or the first width and height setting standard, which includes the steps as shown in FIG. 3:
and 310, determining a control edge distance based on the total pixel number of the first screen width and the height of the first terminal and the first edge distance scaling multiple.
Specifically, the first total screen width pixel count and the first total screen height pixel count include a total screen width pixel count and/or a total screen height pixel count, and the placement position of the UI control is determined using the total screen width pixel count (screenWidthPixels) and the first edge distance scaling factor. As shown in fig. 4, the distances top, left, and right are scaled based on the screen widths, and the sizes are all screen widths, wherein the scale ranges from [0, + ∞ ], and different values of the scale can obtain different values of top, left, and right, for example, 0.1 for left and 0.3 for top.
And step 320, determining the height and/or width of the control based on the total number of pixels of the first screen width and the height of the first terminal and the zoom factor of the control.
Specifically, the dimensions of the UI controls are determined using screenwidthpexels and control scaling factors. As shown in fig. 4, the control height (UI height) and the control width (UI width) are scaled based on the screen width dimensions, and both the size and the size are screen width dimensions, where the scale is [0, + ∞ ], and different values of the scale can obtain different values of the UI height and the UI width, for example, the UI height is screen width dimensions 0.3 and the UI width is screen width dimensions 0.6.
And step 330, placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
The UI control layer is the layer located at the bottommost layer, on the UI control layer, the Android, ios or applet abandons the original UI control placing mode, and the UI control placing position and size are determined by using the total pixel number of the first screen width and the height, the first edge distance scaling multiple and the control scaling multiple. In addition, the UI control can select 2, 3 or 4 placement restrictions in left, right, top, or bottom placement according to different situations, and fig. 4 uses a combination of left, right, and top placement.
Further, in an embodiment of the present invention, the second placement criterion includes a second edge distance scaling multiple of the canvas edge distance relative to the total number of pixels of the first screen width, the second width and height setting criterion includes a canvas scaling multiple of the canvas height and/or the canvas width relative to the total number of pixels of the first screen width, and the canvas is placed in the canvas layer based on the second placement criterion and/or the second width and height setting criterion, including the steps shown in fig. 5:
and 510, determining the canvas edge distance based on the total number of pixels of the first screen width and the height of the first terminal and the scaling multiple of the second edge distance.
Specifically, the first total number of screen width and height pixels includes a total number of screen width pixels and/or a total number of screen height pixels, and the placement position of the canvas is determined using the total number of screen width pixels (screen width pixels) and the second edge distance scaling factor. The distances top, left and right are obtained by scaling with the screen widths as the reference, the sizes of the distances top, left and right are all screen widths scales, wherein the value range of the scales is [0, + ∞ ], and different values of the scales can obtain different tops, left and right.
In particular, the size of the canvas is determined using the screen widthpicixels and the canvas zoom factor. The canvas height and the canvas width are obtained by scaling with screen width as a reference, the sizes of the canvas height and the canvas width are screen width scales, wherein the scale range is [0, + ∞ ], and different values of the scales can obtain different canvas widths and canvas heights. The canvas may be sized to fill the screen, or may not fill the screen or exceed the screen.
At step 530, a canvas is placed over the canvas layer based on the canvas edge distance, canvas height, and/or canvas width.
It should be noted that the canvas layer is located in the middle layer. As shown in fig. 6, if the UI control is placed in a manner of placing the control downward with the top as a reference, placing the control rightward with the left as a reference, and placing the control leftward with the right as a reference, the canvas also needs to be placed on top, left, and right. On the canvas layer, the canvas placement mode needs to be consistent with the UI control placement mode, and 2, 3 or 4 placement limits are selected from left placement, right placement, top placement and bottom placement.
Fig. 7 is a flowchart illustrating a cross-platform brush synchronization method (for a second terminal) according to an embodiment of the present invention, where as shown in fig. 7, the method includes:
Specifically, a broker or a client uses Android, ios or applets to see the same material content, explains a cell picture, a room picture or a floor plan to the client through voice, and generally uses a painting brush to locate a target marker to improve communication efficiency. However, the disparity in understanding is caused by the fact that stroke synchronization cannot be accurately displayed on the same marker due to the inconsistency in the interface standard metrics used by android, IOS and applets on three sides. In order to achieve the effect that paintbrushes on different terminals can accurately draw the same marker, the UI control layer, the canvas layer and the paintbrush layer are used on the terminals, and a unified control placing standard and/or a control width and height setting standard, a canvas placing standard and/or a canvas width and height setting standard are defined for the UI control layer and the canvas layer of different terminals respectively, so that the relative positions of the UI control and the canvas in different terminal interfaces are consistent.
And 720, receiving a first brush coordinate and a first total number of screen width and height pixels, which are transmitted by the first terminal and forwarded by the server, and drawing strokes in a brush layer based on the first brush coordinate, the first total number of screen width and height pixels and a second total number of screen width and height pixels of the second terminal.
Specifically, the second terminal obtains a first painting brush coordinate and a first total number of pixels of screen width height from the server, and the second terminal draws the strokes in the painting brush layer based on the second total number of pixels of screen width height, so that the drawn strokes are consistent in relative positions in different terminal interfaces.
Specifically, the UI control layer, the canvas layer and the painting brush layer are superposed, so that a broker and a client can see the display effect that the painting brush is synchronously displayed on the same marker on different terminals, and the painting brush can be accurately distinguished even on pictures with dense markers, and the understanding difference is avoided.
According to the cross-platform painting brush synchronization method, the UI control and the painting brush are placed by respectively using the unified placement standard and/or the width and height setting standard on the UI control layer and the painting brush layer of different terminals, so that the relative positions of the UI control and the painting brush in different terminal interfaces are consistent, the painting brush coordinate and the total number of pixels of the screen width and the height of the painting brush layer are transmitted between different terminals, the same painting brush is drawn on the painting brush layer of each terminal according to the painting brush coordinate and the total number of pixels of the screen width and the height, the problem that due to the fact that interface standard measurements used by different terminals are not consistent, the painting brush cannot be accurately displayed on the same marker, understanding difference is caused is solved, and the display effect that the painting brush accurately draws the same marker on different terminals is achieved.
Further, in an embodiment of the present invention, the first placement criterion includes a first edge distance scaling multiple of the edge distance of the control with respect to the total number of pixels of the height of the second screen width, the first width and height setting criterion includes a control scaling multiple of the height of the control and/or the width of the control with respect to the total number of pixels of the height of the second screen width, and the UI control is placed on the UI control layer based on the first placement criterion and/or the first width and height setting criterion, including the steps shown in fig. 8:
and 810, determining the control edge distance based on the total pixel number of the second screen width and the height of the second terminal and the scaling multiple of the first edge distance.
Specifically, the second total number of screen width and height pixels includes a second total number of screen width pixels and/or a second total number of screen height pixels, and the placement position of the canvas is determined using the second total number of screen width pixels (screenWidthPixels) and the second edge distance scaling factor. The distances top, left and right are obtained by scaling with the screen widths as the reference, the sizes of the distances top, left and right are all screen widths scales, wherein the value range of the scales is [0, + ∞ ], and different values of the scales can obtain different tops, left and right.
And 820, determining the height and/or width of the control based on the total number of pixels of the second screen width and the height of the second terminal and the zoom factor of the control.
Specifically, the dimensions of the UI controls are determined using screenwidthpexels and control scaling factors. The control height (UI height) and the control width (UI width) are scaled based on the screen width hpixels, and both the sizes are screen width hpixels, where the scale value ranges from [0, + ∞ ], and different scale values can obtain different UI heights and UI widths, for example, UI height ═ screen width hpixels 0.3 and UI width ═ screen width hpixels 0.6.
And 830, placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
The UI control layer is the layer located at the bottommost layer, the original UI control placing mode is abandoned by the Android, ios or the applet on the UI control layer, and the UI control placing position and size are determined by using the total number of pixels of the screen width and the height, the first edge distance scaling multiple and the control scaling multiple. In addition, the UI control can select 2, 3, or 4 placement restrictions in left, right, top, or bottom placement depending on the situation.
Further, in an embodiment of the present invention, the second placement criterion includes a second edge distance scaling multiple of the canvas edge distance relative to the total pixel number of the second screen width, the second width and height setting criterion includes a canvas scaling multiple of the canvas height and/or the canvas width relative to the total pixel number of the second screen width, and the canvas is placed in the canvas layer based on the second placement criterion and/or the second width and height setting criterion, including the steps shown in fig. 9:
and step 910, determining the canvas edge distance based on the second screen width, height and total pixel number of the second terminal and the second edge distance scaling multiple.
Specifically, the total number of screen width and height pixels includes the total number of screen width pixels and/or the total number of screen height pixels, and the placement position of the canvas is determined using the total number of screen width pixels (screen width pixels) and the second edge distance scaling factor. The distances top, left and right are obtained by scaling with the screen widths as the reference, the sizes of the distances top, left and right are all screen widths scales, wherein the value range of the scales is [0, + ∞ ], and different values of the scales can obtain different tops, left and right.
And 920, determining the height and/or width of the canvas based on the total number of pixels of the second screen width and the height of the second screen of the second terminal and the canvas scaling factor.
In particular, the size of the canvas is determined using the screen widthpicixels and the canvas zoom factor. The canvas height and the canvas width are obtained by scaling with screen width as a reference, the sizes of the canvas height and the canvas width are screen width scales, wherein the scale range is [0, + ∞ ], and different values of the scales can obtain different canvas widths and canvas heights. The canvas may be sized to fill the screen, or may not fill the screen or exceed the screen.
It should be noted that the canvas layer is located in the middle layer. If the UI control is placed in a mode that the control is placed downwards by taking the top as a reference, the control is placed rightwards by taking the left side as a reference, and the control is placed leftwards by taking the right side as a reference, the canvas needs to be placed at the top, left and right. On the canvas layer, the canvas placement mode needs to be consistent with the UI control placement mode, and 2, 3 or 4 placement limits are selected from left placement, right placement, top placement and bottom placement.
Further, in an embodiment of the present invention, receiving a first brush coordinate and a first total number of screen widths and heights that are sent by a first terminal and forwarded by a server, and drawing a brush in a brush layer based on the first brush coordinate, the first total number of screen widths and heights, and a second total number of screen widths and heights of a second terminal, includes the steps shown in fig. 10:
It should be noted that the brush layer is located at the topmost layer, and the brush is drawn on the canvas. Each stroke is a line segment which is connected by sequential points, and the data transmission is the coordinates of the sequential brush points. The cross-platform data protocol defines JsonString type stroke data, and comprises codenwidthPixels at a broker side or a client side (Android, ios and applet) and coordinates position X and position Y of brush points relative to the codenwidthPixels respectively on an x axis and a y axis, and the coordinates position of all the brush points in a brush line segment are recorded in sequence.
And step 1020, converting the first brush coordinate into a target brush coordinate based on the total pixel number of the first screen width and the height of the first terminal and the total pixel number of the second screen width and the height of the second terminal.
Specifically, when stroke data of a different terminal is received, screen widths in the data is read and recorded as width 1. And acquiring the screen width of the current terminal, and recording the acquired screen width as width 2. Traversing all the stroke points in points, and converting the coordinates of the stroke points by using the following two formulas to obtain the target coordinates of the brush:
positionX＝positinoX*width2/width1；
positionY＝positionY*width2/width1；
and step 1030, drawing the strokes in the brush layer based on the target brush coordinates.
After the data conversion is completed, the strokes are drawn on the screen in a self-defined form (self-defined stroke width, brush color, brush style and the like) by using a brush tool on different terminals.
In summary, according to the cross-platform brush synchronization method provided by the invention, the UI control and the canvas are placed by using the cross-platform placement standard and/or the width and height setting standard on the UI control layer and the canvas layer respectively, the brush data of the brush layer is transmitted between different terminals for drawing, and the UI control layer, the canvas layer and the brush layer are superposed to realize the display effect that the brush accurately draws the same marker at different terminals, and meanwhile, the brush can be customized in a form, the thickness of the stroke, the color, the line style and the like are changed, and the user experience is improved.
The cross-platform brush synchronizing device provided by the invention is described below, and the cross-platform brush synchronizing device described below and the cross-platform brush synchronizing method described above can be referred to in a corresponding manner.
Fig. 11 is a schematic structural diagram of a cross-platform brush synchronizer (used in a first terminal) according to an embodiment of the present invention, and as shown in fig. 11, the cross-platform brush synchronizer includes:
a first processing unit 1110, configured to place a UI control in a UI control layer based on a first placement standard and/or a first width and height setting standard, place a canvas in a canvas layer based on a second placement standard and/or a second width and height setting standard, and perform the same processing with a second terminal, where the first terminal and the second terminal use a UI control layer, a canvas layer, and a brush layer, the UI control layer is located at a bottom layer, the canvas layer is located at a middle layer, and the brush layer is located at a top layer;
the second processing unit 1120 is configured to determine a first brush coordinate of the brush layer based on a brush operation of a user, and send the first brush coordinate and the total number of pixels of the first screen width and height to a server, so that the second terminal receives the first brush coordinate and the total number of pixels of the first screen width and height forwarded by the server.
According to the cross-platform painting brush synchronizing device, the UI control and the painting brush are placed by respectively using the unified placing standard and/or the width and height setting standard on the UI control layer and the painting brush layer of different terminals, so that the relative positions of the UI control and the painting brush in different terminal interfaces are consistent, the painting brush coordinate and the total number of pixels of the screen width and the height of the painting brush layer are transmitted between different terminals, the same painting brush is drawn on the painting brush layer of each terminal according to the painting brush coordinate and the total number of pixels of the screen width and the height, the problem that due to the fact that interface standard measurements used by different terminals are not consistent, the painting brush cannot be accurately displayed on the same marker, understanding difference is caused is solved, and the display effect that the painting brush accurately draws the same marker on different terminals is achieved.
According to the cross-platform painting brush device provided by the invention, the first placement standard comprises a first edge distance scaling multiple of a control edge distance relative to a first screen width and height total pixel number, and the first width and height setting standard comprises a control scaling multiple of a control height and/or a control width relative to the first screen width and height total pixel number;
the first processing unit 1110 is further configured to:
determining a control edge distance based on a first screen width, height and total pixel number of a first terminal and a first edge distance scaling multiple;
determining the height and/or width of a control based on the total number of pixels of the first screen width and the height of the first terminal and the zoom factor of the control;
and placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
According to the cross-platform painting brush device provided by the invention, the second placement standard comprises a second edge distance scaling multiple of the canvas edge distance relative to the total pixel number of the first screen width, and the second width and height setting standard comprises a canvas scaling multiple of the canvas height and/or the canvas width relative to the total pixel number of the first screen width;
the first processing unit 1110 is further configured to:
determining the canvas edge distance based on the total pixel number of the first screen width and the height of the first terminal and the scaling multiple of the second edge distance;
determining the canvas height and/or the canvas width based on the total number of pixels of the first screen width and the canvas scaling factor of the first terminal;
placing a canvas on the canvas layer based on the canvas edge distance, the canvas height, and/or the canvas width.
Fig. 12 is a schematic structural diagram of a cross-platform brush synchronizer (for a second terminal) provided in the present invention, and as shown in fig. 12, the cross-platform brush synchronizer includes:
a first processing unit 1210, configured to place a UI control in a UI control layer based on a first placement standard and/or a first width and height setting standard, place a canvas in a canvas layer based on a second placement standard and/or a second width and height setting standard, and perform the same processing as the first terminal, where the first terminal and the second terminal use a UI control layer, a canvas layer, and a brush layer, the UI control layer is located at a bottom layer, the canvas layer is located at a middle layer, and the brush layer is located at a top layer;
a second processing unit 1220, configured to receive a first brush coordinate and a first total number of screen widths and heights, which are sent by a first terminal and forwarded by a server, and draw a stroke in a brush layer based on the first brush coordinate, the first total number of screen widths and heights, and a second total number of screen widths and heights of a second terminal;
the third processing unit 1230 is configured to process the UI control and the canvas, which are placed in the UI control layer and the canvas layer in the standard manner, based on the strokes, and display a brush effect at the second terminal.
According to the cross-platform painting brush synchronizing device, the UI control and the painting brush are placed by respectively using the unified placing standard and/or the width and height setting standard on the UI control layer and the painting brush layer of different terminals, so that the relative positions of the UI control and the painting brush in different terminal interfaces are consistent, the painting brush coordinate and the total number of pixels of the screen width and the height of the painting brush layer are transmitted between different terminals, the same painting brush is drawn on the painting brush layer of each terminal according to the painting brush coordinate and the total number of pixels of the screen width and the height, the problem that due to the fact that interface standard measurements used by different terminals are not consistent, the painting brush cannot be accurately displayed on the same marker, understanding difference is caused is solved, and the display effect that the painting brush accurately draws the same marker on different terminals is achieved.
According to the cross-platform painting brush device provided by the invention, the first placement standard comprises a first edge distance scaling multiple of a control edge distance relative to the total pixel number of the second screen width and the height, and the first width and height setting standard comprises a control scaling multiple of a control height and/or a control width relative to the total pixel number of the second screen width and the height;
the first processing unit 1210 is further configured to:
determining a control edge distance based on a second screen width and height total pixel number of a second terminal and a first edge distance scaling multiple;
determining the height and/or width of a control based on the total number of pixels of the second screen width and the height of the second terminal and the zoom factor of the control;
and placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
According to the cross-platform painting brush device provided by the invention, the second placing standard comprises a second edge distance scaling multiple of the canvas edge distance relative to the total pixel number of the second screen width, and the second width and height setting standard comprises a canvas scaling multiple of the canvas height and/or the canvas width relative to the total pixel number of the second screen width;
the first processing unit 1210 is further configured to:
determining the canvas edge distance based on the total pixel number of the second screen width and the height of the second terminal and the scaling multiple of the second edge distance;
determining the canvas height and/or the canvas width based on the total pixel number of the second screen width and the canvas scaling factor of the second terminal;
placing a canvas on the canvas layer based on the canvas edge distance, the canvas height, and/or the canvas width.
According to the cross-platform brush device provided by the present invention, the second processing unit 1220 is further configured to:
receiving a first painting brush coordinate transmitted by a first terminal and a first screen width, height and total pixel number of the first terminal, which are forwarded by a server;
converting the first brush coordinate into a target brush coordinate based on the total pixel number of the first screen width and the height of the first terminal and the total pixel number of the second screen width and the height of the second terminal;
and drawing strokes in the brush layer based on the target brush coordinates.
Fig. 13 illustrates a physical structure diagram of an electronic device, and as shown in fig. 13, the electronic device may include: a processor (processor)1310, a communication Interface (Communications Interface)1320, a memory (memory)1330 and a communication bus 1340, wherein the processor 1310, the communication Interface 1320 and the memory 1330 communicate with each other via the communication bus 1340. Processor 1310 may invoke logic instructions in memory 1330 to perform a cross-platform brush synchronization method, wherein the cross-platform brush synchronization method for the first terminal comprises: placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a second terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer; determining a first brush coordinate of the brush layer based on a brush operation of a user, and sending the first brush coordinate and the total number of pixels of the first screen width and the first screen height to a server so that a second terminal receives the first brush coordinate and the total number of pixels of the first screen width and the first screen height forwarded by the server. The cross-platform brush synchronization method for the second terminal comprises the following steps: placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a first terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer; receiving a first painting brush coordinate and a first total pixel of screen width height transmitted by a first terminal and forwarded by a server, and drawing strokes in a painting brush layer based on the first painting brush coordinate, the first total pixel of screen width height and a second total pixel of screen width height of a second terminal; and processing the UI control and the canvas which are placed on the UI control layer and the canvas layer in a standard mode based on the strokes, and displaying the painting brush effect on the second terminal.
In addition, the logic instructions in the memory 1330 may be implemented in software functional units and stored in a computer readable storage medium when sold or used as a stand-alone product. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
In another aspect, the present invention also provides a computer program product comprising a computer program stored on a non-transitory computer-readable storage medium, the computer program comprising program instructions which, when executed by a computer, enable the computer to perform the cross-platform brush synchronization method provided by the above methods, wherein the cross-platform brush synchronization method for the first terminal comprises: placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a second terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer; determining a first brush coordinate of the brush layer based on a brush operation of a user, and sending the first brush coordinate and the total number of pixels of the first screen width and the first screen height to a server so that a second terminal receives the first brush coordinate and the total number of pixels of the first screen width and the first screen height forwarded by the server. The cross-platform brush synchronization method for the second terminal comprises the following steps: placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a first terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer; receiving a first painting brush coordinate and a first total pixel of screen width height transmitted by a first terminal and forwarded by a server, and drawing strokes in a painting brush layer based on the first painting brush coordinate, the first total pixel of screen width height and a second total pixel of screen width height of a second terminal; and processing the UI control and the canvas which are placed on the UI control layer and the canvas layer in a standard mode based on the strokes, and displaying the painting brush effect on the second terminal.
In yet another aspect, the present invention also provides a non-transitory computer-readable storage medium having stored thereon a computer program, which when executed by a processor, is implemented to perform the above-provided cross-platform brush synchronization method, wherein the cross-platform brush synchronization method for the first terminal includes: placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a second terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer; determining a first brush coordinate of the brush layer based on a brush operation of a user, and sending the first brush coordinate and the total number of pixels of the first screen width and the first screen height to a server so that a second terminal receives the first brush coordinate and the total number of pixels of the first screen width and the first screen height forwarded by the server. The cross-platform brush synchronization method for the second terminal comprises the following steps: placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a first terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer; receiving a first painting brush coordinate and a first total pixel of screen width height transmitted by a first terminal and forwarded by a server, and drawing strokes in a painting brush layer based on the first painting brush coordinate, the first total pixel of screen width height and a second total pixel of screen width height of a second terminal; and processing the UI control and the canvas which are placed on the UI control layer and the canvas layer in a standard mode based on the strokes, and displaying the painting brush effect on the second terminal.
The above-described embodiments of the apparatus are merely illustrative, and the units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware. With this understanding in mind, the above-described technical solutions may be embodied in the form of a software product, which can be stored in a computer-readable storage medium such as ROM/RAM, magnetic disk, optical disk, etc., and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the methods described in the embodiments or some parts of the embodiments.
Finally, it should be noted that: the above examples are only intended to illustrate the technical solution of the present invention, but not to limit it; although the present invention has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and such modifications or substitutions do not depart from the spirit and scope of the corresponding technical solutions of the embodiments of the present invention.
Claims (10)
1. A cross-platform brush synchronization method is used for a first terminal and comprises the following steps:
placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a second terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer;
determining a first brush coordinate of the brush layer based on a brush operation of a user, and sending the first brush coordinate and the total number of pixels of the first screen width and the first screen height to a server so that a second terminal receives the first brush coordinate and the total number of pixels of the first screen width and the first screen height forwarded by the server.
2. The cross-platform brush synchronization method of claim 1, wherein the first placement criteria comprises a first edge distance scaling factor of a control edge distance relative to a first screen width total number of pixels high, and wherein the first width and height setting criteria comprises a control scaling factor of a control height and/or a control width relative to a first screen width total number of pixels high;
the step of placing the UI control on the UI control layer based on the first placement standard and/or the first width and height setting standard comprises the following steps:
determining a control edge distance based on a first screen width, height and total pixel number of a first terminal and a first edge distance scaling multiple;
determining the height and/or width of a control based on the total number of pixels of the first screen width and the height of the first terminal and the zoom factor of the control;
and placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
3. The cross-platform brush synchronization method of claim 2, wherein the second placement criteria comprises a second edge distance scaling factor of the canvas edge distance relative to the first screen width by total number of pixels, and wherein the second aspect setting criteria comprises a canvas scaling factor of the canvas height and/or the canvas width relative to the first screen width by total number of pixels;
the canvas is placed on the canvas layer based on a second placement standard and/or a second width and height setting standard, and the canvas placement method comprises the following steps:
determining the canvas edge distance based on the total pixel number of the first screen width and the height of the first terminal and the scaling multiple of the second edge distance;
determining the canvas height and/or the canvas width based on the total number of pixels of the first screen width and the canvas scaling factor of the first terminal;
placing a canvas on the canvas layer based on the canvas edge distance, the canvas height, and/or the canvas width.
4. A cross-platform brush synchronization method is used for a second terminal and comprises the following steps:
placing a UI control on a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas on a canvas layer based on a second placing standard and/or a second width and height setting standard, and carrying out the same treatment along with a first terminal, wherein the first terminal and the second terminal use a UI control layer, a canvas layer and a brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the brush layer is positioned at the top layer;
receiving a first painting brush coordinate and a first total pixel of screen width height transmitted by a first terminal and forwarded by a server, and drawing strokes in a painting brush layer based on the first painting brush coordinate, the first total pixel of screen width height and a second total pixel of screen width height of a second terminal;
and processing the UI control and the canvas which are placed on the UI control layer and the canvas layer in a standard mode based on the strokes, and displaying the painting brush effect on the second terminal.
5. The cross-platform brush synchronization method of claim 4, wherein the first placement criteria comprises a first edge distance scaling factor of a control edge distance relative to a total number of pixels of second screen width height, and wherein the first width height setting criteria comprises a control scaling factor of a control height and/or a control width relative to a total number of pixels of second screen width height;
the step of placing the UI control on the UI control layer based on the first placement standard and/or the first width and height setting standard comprises the following steps:
determining a control edge distance based on a second screen width and height total pixel number of a second terminal and a first edge distance scaling multiple;
determining the height and/or width of a control based on the total number of pixels of the second screen width and the height of the second terminal and the zoom factor of the control;
and placing the UI control on the UI control layer based on the control edge distance, the control height and/or the control width.
6. The cross-platform brush synchronization method of claim 5, wherein the second placement criteria comprises a second edge distance scaling factor of the canvas edge distance relative to a second screen width by total number of pixels, and the second aspect setting criteria comprises a canvas scaling factor of the canvas height and/or the canvas width relative to the second screen width by total number of pixels;
the canvas is placed on the canvas layer based on a second placement standard and/or a second width and height setting standard, and the canvas placement method comprises the following steps:
determining the canvas edge distance based on the total pixel number of the second screen width and the height of the second terminal and the scaling multiple of the second edge distance;
determining the canvas height and/or the canvas width based on the total pixel number of the second screen width and the canvas scaling factor of the second terminal;
placing a canvas on the canvas layer based on the canvas edge distance, the canvas height, and/or the canvas width.
7. The inter-platform brush synchronization method according to claim 4, wherein receiving a first brush coordinate and a first total number of pixels in screen width and height transmitted by a first terminal and forwarded by a server, and drawing a stroke in a brush layer based on the first brush coordinate and the first total number of pixels in screen width and height and a second total number of pixels in screen width and height of a second terminal includes:
receiving a first painting brush coordinate transmitted by a first terminal and a first screen width, height and total pixel number of the first terminal, which are forwarded by a server;
converting the first brush coordinate into a target brush coordinate based on the total pixel number of the first screen width and the height of the first terminal and the total pixel number of the second screen width and the height of the second terminal;
and drawing strokes in the brush layer based on the target brush coordinates.
8. A cross-platform brush synchronization apparatus for a first terminal, the apparatus comprising:
the first processing unit is used for placing a UI control in a UI control layer based on a first placing standard and/or a first width and height setting standard, placing a canvas in a canvas layer based on a second placing standard and/or a second width and height setting standard, and processing the same along with a second terminal, wherein the first terminal and the second terminal use the UI control layer, the canvas layer and a painting brush layer, the UI control layer is positioned at the bottom layer, the canvas layer is positioned at the middle layer, and the painting brush layer is positioned at the top layer;
and the second processing unit is used for determining a first brush coordinate of the brush layer based on the brush operation of the user and sending the first brush coordinate and the total number of pixels of the first screen width and the first screen height to the server so that the second terminal receives the first brush coordinate and the total number of pixels of the first screen width and the first screen height forwarded by the server.
9. A computer program product comprising computer program/instructions, characterized in that the computer program/instructions, when executed by a processor, implement the steps of the cross-platform brush synchronization method of any of claims 1 to 7.
10. A non-transitory computer readable storage medium having stored thereon a computer program, wherein the computer program when executed by a processor implements the steps of the cross-platform brush synchronization method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111050575.0A CN113961158A (en) | 2021-09-08 | 2021-09-08 | Cross-platform painting brush synchronization method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111050575.0A CN113961158A (en) | 2021-09-08 | 2021-09-08 | Cross-platform painting brush synchronization method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113961158A true CN113961158A (en) | 2022-01-21 |
Family
ID=79461070
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111050575.0A Pending CN113961158A (en) | 2021-09-08 | 2021-09-08 | Cross-platform painting brush synchronization method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113961158A (en) |
Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103530117A (en) * | 2013-09-30 | 2014-01-22 | 山西云途信息技术有限公司 | Method and device for adapting to screens, of different sizes, of mobile terminals |
| CN103885755A (en) * | 2012-12-19 | 2014-06-25 | 腾讯科技（深圳）有限公司 | Method and device for implementing screen matching of owner-draw controls |
| CN104111839A (en) * | 2014-07-29 | 2014-10-22 | 广东能龙教育股份有限公司 | Absolute positioning method based on canvas |
| CN105760178A (en) * | 2016-03-17 | 2016-07-13 | 网易（杭州）网络有限公司 | Method and device for performing adaption on interface control |
| CN106095294A (en) * | 2016-06-08 | 2016-11-09 | 福建天泉教育科技有限公司 | Method and the system thereof of stroke is synchronized between different platform |
| CN107015793A (en) * | 2016-12-12 | 2017-08-04 | 阿里巴巴集团控股有限公司 | Design original text adaptation method, apparatus and system |
| CN107204023A (en) * | 2017-06-22 | 2017-09-26 | 网易（杭州）网络有限公司 | Avoid the method and apparatus of aliasing being plotted in canvas painting canvas |
| CN110634102A (en) * | 2019-11-19 | 2019-12-31 | 成都品果科技有限公司 | Cross-platform certificate photo mobile terminal system based on flutter and use method thereof |
| CN110780872A (en) * | 2019-09-03 | 2020-02-11 | 腾讯科技（深圳）有限公司 | Element arrangement method and device, computer readable storage medium and equipment |
| CN110990009A (en) * | 2019-11-29 | 2020-04-10 | 湖南快乐阳光互动娱乐传媒有限公司 | Method for adapting different screen sizes of Android-UI and Android application development method |
| CN112328353A (en) * | 2021-01-06 | 2021-02-05 | 腾讯科技（深圳）有限公司 | Display method and device of sub-application player, electronic equipment and storage medium |
| CN113031838A (en) * | 2019-12-25 | 2021-06-25 | 华为技术有限公司 | Screen recording method and device and electronic equipment |
-
2021
- 2021-09-08 CN CN202111050575.0A patent/CN113961158A/en active Pending
Patent Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103885755A (en) * | 2012-12-19 | 2014-06-25 | 腾讯科技（深圳）有限公司 | Method and device for implementing screen matching of owner-draw controls |
| CN103530117A (en) * | 2013-09-30 | 2014-01-22 | 山西云途信息技术有限公司 | Method and device for adapting to screens, of different sizes, of mobile terminals |
| CN104111839A (en) * | 2014-07-29 | 2014-10-22 | 广东能龙教育股份有限公司 | Absolute positioning method based on canvas |
| CN105760178A (en) * | 2016-03-17 | 2016-07-13 | 网易（杭州）网络有限公司 | Method and device for performing adaption on interface control |
| CN106095294A (en) * | 2016-06-08 | 2016-11-09 | 福建天泉教育科技有限公司 | Method and the system thereof of stroke is synchronized between different platform |
| CN107015793A (en) * | 2016-12-12 | 2017-08-04 | 阿里巴巴集团控股有限公司 | Design original text adaptation method, apparatus and system |
| CN107204023A (en) * | 2017-06-22 | 2017-09-26 | 网易（杭州）网络有限公司 | Avoid the method and apparatus of aliasing being plotted in canvas painting canvas |
| CN110780872A (en) * | 2019-09-03 | 2020-02-11 | 腾讯科技（深圳）有限公司 | Element arrangement method and device, computer readable storage medium and equipment |
| CN110634102A (en) * | 2019-11-19 | 2019-12-31 | 成都品果科技有限公司 | Cross-platform certificate photo mobile terminal system based on flutter and use method thereof |
| CN110990009A (en) * | 2019-11-29 | 2020-04-10 | 湖南快乐阳光互动娱乐传媒有限公司 | Method for adapting different screen sizes of Android-UI and Android application development method |
| CN113031838A (en) * | 2019-12-25 | 2021-06-25 | 华为技术有限公司 | Screen recording method and device and electronic equipment |
| CN112328353A (en) * | 2021-01-06 | 2021-02-05 | 腾讯科技（深圳）有限公司 | Display method and device of sub-application player, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108961152B (en) | Method and device for generating plane house type graph | |
| US11839820B2 (en) | Method and apparatus for generating game character model, processor, and terminal | |
| US20180232135A1 (en) | Method for window displaying on a mobile terminal and mobile terminal | |
| CN107484428B (en) | Method for displaying objects | |
| WO2020098530A1 (en) | Picture rendering method and apparatus, and storage medium and electronic apparatus | |
| CN108961417B (en) | Method and device for automatically generating space size in three-dimensional house model | |
| CN107610131A (en) | A kind of image cropping method and image cropping device | |
| CN110503725A (en) | Method, apparatus, electronic equipment and the computer readable storage medium of image procossing | |
| CN106530388A (en) | 3D printing device based on two-dimensional image, and three-dimensional modeling method for 3D printing device | |
| CN110189402A (en) | A kind of floor plan three-dimensional display method, medium, equipment and device based on AR | |
| CN106952331B (en) | Texture mapping method and device based on three-dimensional model | |
| EP3198559A2 (en) | Modifying video call data | |
| CN103984720B (en) | Tile map creation method and device based on OpenGL | |
| EP3035289A1 (en) | Method and device for adsorbing straight line/line segment, and method and device for constructing polygon | |
| US20200013187A1 (en) | Space coordinate converting server and method thereof | |
| CN108470377A (en) | AR sees room device | |
| CN104580883A (en) | Image processing device and image processing method | |
| CN108230434B (en) | Image texture processing method and device, storage medium and electronic device | |
| CN109491565B (en) | Method and equipment for displaying component information of object in three-dimensional scene | |
| CN107203961B (en) | Expression migration method and electronic equipment | |
| CN113961158A (en) | Cross-platform painting brush synchronization method and device | |
| CN109522532A (en) | A kind of calculation method and device of line chart selection range | |
| CN110587599A (en) | Drawing method, device and system based on curved surface drawing carrier | |
| CN114968016A (en) | Tableware placement guiding method and device, storage medium and mobile terminal | |
| CN108389112A (en) | 3D house type model display methods |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20220314 Address after: 100085 Floor 101 102-1, No. 35 Building, No. 2 Hospital, Xierqi West Road, Haidian District, Beijing Applicant after: Seashell Housing (Beijing) Technology Co.,Ltd. Address before: 101309 room 24, 62 Farm Road, Erjie village, Yangzhen, Shunyi District, Beijing Applicant before: Beijing fangjianghu Technology Co.,Ltd. |
|
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20220121 |