CN107885437A - multi-element interaction method, device, equipment and storage medium - Google Patents

multi-element interaction method, device, equipment and storage medium Download PDF

Info

Publication number
CN107885437A
CN107885437A CN201711230674.0A CN201711230674A CN107885437A CN 107885437 A CN107885437 A CN 107885437A CN 201711230674 A CN201711230674 A CN 201711230674A CN 107885437 A CN107885437 A CN 107885437A
Authority
CN
China
Prior art keywords
active region
boundary
current
region
clicking
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
Application number
CN201711230674.0A
Other languages
Chinese (zh)
Inventor
刘少杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Shiyuan Electronics Thecnology Co Ltd
Guangzhou Shirui Electronics Co Ltd
Original Assignee
Guangzhou Shiyuan Electronics Thecnology Co Ltd
Guangzhou Shirui Electronics Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Guangzhou Shiyuan Electronics Thecnology Co Ltd, Guangzhou Shirui Electronics Co Ltd filed Critical Guangzhou Shiyuan Electronics Thecnology Co Ltd
Priority to CN201711230674.0A priority Critical patent/CN107885437A/en
Publication of CN107885437A publication Critical patent/CN107885437A/en
Priority to PCT/CN2018/114337 priority patent/WO2019105191A1/en
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The embodiment of the invention discloses a multi-element interaction method, a device, equipment and a storage medium, which relate to the interaction technology, and the method comprises the following steps: if the current operation object is detected to have at least two elements with overlapped logic boundaries, judging whether the position of the click operation corresponding to the current operation object is in an activation region of the element; if yes, determining a target element corresponding to the activation area according to the activation area; responding to the operation of the target element meeting the set condition, and controlling the target element to change the display state according to the editing instruction corresponding to the operation; the activation area of the element comprises a boundary line of the element and a closed area formed by the boundary line, and the logic boundary is a rectangular boundary displayed when the element is in a selected state. In the multi-element interaction process, the defects that only regular elements can be used and lower-layer elements are not responded are overcome, and normal interaction of all elements is guaranteed.

Description

Multielement exchange method, device, equipment and storage medium
Technical field
The present invention relates to interaction technique, more particularly to a kind of multielement exchange method, device, equipment and storage medium.
Background technology
It is DOM Document Object Model (Document to be rendered in browser environment, in browser with the unit of action listener Object Model, DOM) element, and the border of the element of any standard is all rectangle, when interaction occur irregular element it It is outer and when within DOM element bounding rectangles, and user mutual event penetrates the element and directly interacted with lower floor element When, in process of the present invention is realized, inventor has found that at least there are the following problems in the prior art:The DOM element thing of browser Part, which is monitored, to stop the interaction, cause lower floor's element cannot respond to.
For such case, it is often the case that multimedia video is individually rendered with DOM element, but can so be brought Another defect, because multimedia video is individually rendered with DOM element, therefore the element will in level positioned at it is all can The either above or below of scaler vector graphics (Scalable Vector Graphics, SVG) daughter element, when demand is video element The hierarchical location of element can not meet to require when not being top set or bottom set.
The content of the invention
The embodiment of the present invention provides a kind of multielement exchange method, device, equipment and storage medium, is interacted in multielement Cheng Zhong, overcoming can only use the defects of rale element and the defects of lower floor's element is not responded, and ensure that each element just Often interaction.
In a first aspect, the embodiments of the invention provide a kind of multielement exchange method, this method includes:
If detecting, current operation object has at least two elements of coincidence for logical boundary, judges that clicking operation is corresponding Whether the position in the current operation object is in the active region of element;
If so, the then object element according to corresponding to the active region determines the active region;
In response to the operation to the object element for meeting to impose a condition, the object element is controlled according to the operation Corresponding edit instruction changes dispaly state;
Wherein, the active region of the element includes the enclosed area that the boundary line of the element and the boundary line are formed Domain, the logical boundary are that the element is in the square boundary shown during selected state.
Second aspect, the embodiment of the present invention additionally provide a kind of multielement interactive device, and the device includes:
Judge module, if for detecting that current operation object is at least two elements that logical boundary has coincidence, sentence Whether the disconnected corresponding position in the current operation object of clicking operation is in the active region of element;
Determining module, for being in the active region of element in the corresponding position in current operation object of clicking operation When, the object element according to corresponding to the active region determines the active region;
Respond module, for the operation to the object element in response to meeting to impose a condition, control the target element Element edit instruction according to corresponding to the operation changes dispaly state;
Wherein, the active region of the element includes the enclosed area that the boundary line of the element and the boundary line are formed Domain, the logical boundary are that the element is in the square boundary shown during selected state.
The third aspect, the embodiment of the present invention additionally provide a kind of computer equipment, including memory, processor and are stored in Realized on memory and the computer program that can run on a processor, during the computing device described program as the present invention is real Apply any described multielement exchange method in example.
Fourth aspect, the embodiment of the present invention additionally provide a kind of computer-readable recording medium, are stored thereon with computer Program, the multielement exchange method as described in any in the embodiment of the present invention is realized when the program is executed by processor.
In the embodiment of the present invention, if by detecting that current operation object is at least two yuan that logical boundary has coincidence Element, then judge whether the corresponding position in the current operation object of clicking operation is in the active region of element;If it is in The active region of element, the then object element according to corresponding to the active region determines the active region;In response to meeting to set The operation to the object element of fixed condition, object element edit instruction according to corresponding to the operation is controlled to change aobvious Show state.In multielement interaction, overcoming can only use the defects of rale element and lower floor's element is not responded Defect, it ensure that the normal interaction of each element.
Brief description of the drawings
Fig. 1 a are a kind of flow charts of multielement exchange method in the embodiment of the present invention one;
Fig. 1 b are the schematic diagrames that a kind of level when rendering being applicable in the embodiment of the present invention one is blocked;
Fig. 1 c are element logic sides when relative position has a coincidence between a kind of element being applicable in the embodiment of the present invention one The schematic diagram on boundary;
Fig. 1 d are the schematic diagrames during a kind of element interactionses using after this programme being applicable in the embodiment of the present invention one;
Fig. 2 a are a kind of flow charts of multielement exchange method in the embodiment of the present invention two;
Fig. 2 b determine the schematic diagram during object element when being a kind of multiple element interactionses being applicable in the embodiment of the present invention two;
Fig. 3 a are a kind of flow charts of multielement exchange method in the embodiment of the present invention three;
Fig. 3 b are a kind of display figure of the multiple elements applicable in the embodiment of the present invention three in non-operating state;
Fig. 3 c be in the embodiment of the present invention three be applicable a kind of multielement interaction when apply this programme after lower floor's element not by The schematic diagram blocked;
Fig. 3 d are the signals that Mutiple Choice region is determined under a kind of Mutiple Choice pattern being applicable in the embodiment of the present invention three Figure;
Fig. 4 is a kind of structural representation of multielement interactive device in the embodiment of the present invention four;
Fig. 5 is a kind of structural representation of computer equipment in the embodiment of the present invention five.
Embodiment
The present invention is described in further detail with reference to the accompanying drawings and examples.It is understood that this place is retouched The specific embodiment stated is used only for explaining the present invention, rather than limitation of the invention.It also should be noted that in order to just Part related to the present invention rather than entire infrastructure are illustrate only in description, accompanying drawing.
Embodiment one
Fig. 1 a are a kind of flow chart for multielement exchange method that the embodiment of the present invention one provides, and the present embodiment is applicable to The situation that multielement interacts in the scene of browser, this method can be interacted by multielement provided in an embodiment of the present invention Device is performed, and the device can be realized by the way of software and/or hardware.With reference to figure 1a, this method can specifically be included such as Lower step:
If S110, detecting that current operation object there are at least two elements of coincidence for logical boundary, judge to click on behaviour Make the active region whether corresponding position in the current operation object is in element, if so, then performing S120.
Wherein, element refers to any display content, including picture, word, multimedia audio-video, plane geometries and vertical Body is several how, and rale element refers to the element that border is rectangle, and irregular element refers to the border of element for than a rectangle Shape element.The environment of browser refers to that Chrome, Safari, Firefox, IE and Edge etc. can show markup language The software of file.In a specific example, the scene of multiple irregular element multi-layer complex interactions can be based on it is clear The elements such as the shape look in the PowerPoint PowerPoint of device.
Specifically, when current operation object is that logical boundary has at least two element of coincidence, clicking operation pair is judged The active region of element whether should be in the position in current operation object.Optionally, the active region of the element includes The closed area that the boundary line of the element and the boundary line are formed, by obtaining clicking operation in current operation object The first coordinate position, and the second coordinate position of first coordinate position and active region in current display page is carried out Compare, if the first coordinate position is located at the regional extent of second coordinate position determination, shows that clicking operation is corresponding and working as Position in preceding operation object is in the active region of element;The logical boundary is that the element shows when being in selected state The square boundary shown, can be corresponding in current display page by obtaining each element respectively in a specific example Coordinate, logical boundary has coincidence to refer to that the coordinate range for the square boundary that at least two elements are shown in selected state has Overlap.Optionally, the coordinate on four summits of the square boundary that can be shown by determining element in selected state determines The coordinate range of logical boundary.
Wherein, the active region of element includes the closed area that the boundary line of element and the boundary line are formed, one In individual specific example, by taking triangle as an example, the active region of the triangular element includes three sides of a triangle and three The closing delta-shaped region that side is formed.The size that border refers to render painting canvas is rendered, logical boundary is that element is in selected shape The square boundary shown during state.
In a specific example, Fig. 1 b show the schematic diagram that a kind of level when rendering is blocked, and 140 be rectangle 1 Square boundary, 150 be right angled triangle 2 square boundary, 160 be obtuse triangle 3 square boundary, wherein, rectangular edges Boundary 140, square boundary 150 and square boundary 160 are to belong to the particular attribute of element in itself, and its square boundary is in user to element Operation and each element interaction in it is invisible.Logical boundary is used for display and the actual storage of control handle, activates side Boundary is the border of element.With reference to figure 1b, activation border be respectively the four edges of rectangle 1, right angled triangle 2 three sides and Three sides of obtuse triangle 3.
Fig. 1 c show the schematic diagram of element logical boundary when relative position between a kind of element has a coincidence, using Fig. 1 c as Example, illustrate the concrete meaning of the logical boundary of element, in figure 1 c, 170 be the logical boundary of right angled triangle 4, and 171 be to render Border, i.e., the size of the painting canvas actually rendered, in this case, because rectangle 5 is in the logical boundary of right angled triangle 4, Generally rectangle 5 can not be carried out in existing scheme the operation such as to pull.Fig. 1 d show a kind of element interactionses using after this programme During schematic diagram, 180 be the logical boundary of rectangle 7, and 181 is render border, be can be seen that by Fig. 1 d by using this Scheme, rectangle 7 can directly be operated by clicking on the B points of the blank space of right angled triangle 6, without by right angled triangle 6 Block.
S120, the object element according to corresponding to the active region determines the active region.
Specifically, when being in the active region of element in the corresponding position in the current operation object of clicking operation, The object element of active region is determined according to active region.Each element corresponds to different levels, in a specific example, Each element in Fig. 1 b is drawn by a single SVG, there is three SVG respectively here, wherein, three SVG respectively with Its corresponding element (rectangle 1, right angled triangle 2 and obtuse triangle 3) label together, the hierarchical relationship of three is obtuse angle triangle Shape 3>Right angled triangle 2>Rectangle 1, i.e. obtuse triangle 3 are placed in top, when the overlapping region of three only has obtuse triangle 3 It can be seen that but when user clicks on A points, the demand of user is activation right angled triangle 2.If it is DOM event, due to obtuse angle three Angular 3 in top, then can now activate obtuse triangle 3, that is, generate unnecessary block.
Wherein it is determined that the mode of object element corresponding to active region can be by inquiring about active region and element respective column Table is obtained, and the corresponding relation of active region and element is stored in the list;The boundary line in active region, root can also be extracted According to boundary line object element.
S130, the operation to the object element in response to meeting to impose a condition, control the object element according to institute State edit instruction corresponding to operation and change dispaly state.
Specifically, after object element is determined, it is optional in response to the operation to object element for meeting to impose a condition , the operation includes clicking on, dragging, scaling, rotation and element it is self-defined etc..The condition of setting can be by object element from Point M is dragged to point N, or by 150 degree of object element rotate counterclockwise etc..
The corresponding different edit instruction of different operations, e.g. zoom operations, then corresponding edit instruction can be used Family is in right click operation object element, menu option corresponding to ejection, " scaling " in click option, and specifically can by Each operation is added different fields and come to function corresponding to different operation additions.And it specifically will operate to enter with edit instruction Row association, change the dispaly state of object element according to edit instruction, wherein, dispaly state includes rotational display and dragging is shown Deng.
In the embodiment of the present invention, if by detecting that current operation object is at least two yuan that logical boundary has coincidence Element, then judge whether the corresponding position in the current operation object of clicking operation is in the active region of element;If it is in The active region of element, the then object element according to corresponding to the active region determines the active region;In response to meeting to set The operation to the object element of fixed condition, object element edit instruction according to corresponding to the operation is controlled to change aobvious Show state.With in existing scheme using DOM element to render when, be only able to display word, image, multimedia audio-video, hyperlink Connect etc. can not be penetrated into when rale element, the interaction time for the white space of irregular element are blocked up to lower floor, will Content is nested in the defects of being rendered in single SVG this DOM element, in multielement interaction in this programme In, overcoming can only use the defects of rale element and the defects of lower floor's element is not responded, and ensure that the normal of each element Interaction.
Embodiment two
Fig. 2 a are a kind of flow chart for multielement exchange method that the embodiment of the present invention two provides, and the present embodiment is in above-mentioned reality On the basis of applying example, " object element according to corresponding to the active region determines the active region " is optimized.Ginseng Fig. 2 a are examined, this method specifically may include steps of:
If S210, detecting that current operation object there are at least two elements of coincidence for logical boundary, judge to click on behaviour Make the active region whether corresponding position in the current operation object is in element, if so, then performing S220.
S220, the identification code for obtaining according to the clicking operation element in the active region.
Specifically, the identification code of the element in active region is obtained according to clicking operation, wherein, each element is corresponding one Identification code, element can be uniquely determined according to the identification code, optionally, identification code can be numeral, letter, symbol or three Any combination.The active coding of each element is stored with local storage or high in the clouds memory, will in a specific example Position of the active coding of each element with clicking operation in current display page is associated, by clicking operation in active region Position obtain the identification code of the corresponding element in active region of clicking operation.
S230, the identification code of the element matched to determine the click with the identification code in the element list that prestores Object element corresponding to operation.
Wherein, the one-to-one relationship of element and identification code is stored with the element list that prestores, for element and identification code The two parameters, it is known that one of parameter in the two can know another parameter, for example, if it is known that identification code then may be used To be searched from the element list that prestores, element corresponding to the identification code is object element in the element list that prestores.
In a specific example, Fig. 2 b determine the signal during object element when showing a kind of multiple element interactionses Figure, the level of rectangle 11 are located at rectangle 8, right angled triangle 9, the top of obtuse triangle 10, are clicking on the center of rectangle 11 not During the blank space C points of filling, it is right angled triangle 9 to determine object element, can directly be carried out with the right angled triangle 9 of its lower floor Interaction.
S240, the operation to the object element in response to meeting to impose a condition, control the object element according to institute State edit instruction corresponding to operation and change dispaly state.
In the embodiment of the present invention, the identification code of the element in the active region is obtained according to the clicking operation, by institute The identification code for stating element is matched with the identification code in the element list that prestores to determine the corresponding target element of the clicking operation Element.Object element is determined by the uniqueness of the identification code of element.
On the basis of above-mentioned technical proposal, the object element according to corresponding to the active region determines the active region It can also be accomplished by the following way:If detecting, the multiselect instruction for occurring to have setting during the clicking operation produces, Then the identification code of multiple elements corresponding to multiple clicking operations in the range of multiselect instruction existence time is prestored with described Identification code in element list is matched, to determine object element corresponding to the multiple clicking operation.
Wherein, the shift keys pressed when the multiselect instruction of setting is included in clicking operation on lower keyboard produce, or click Multiselect button or symbol on touch screen produce.If detect the multiselect instruction production for occurring to have setting during clicking operation It is raw, then by the identification code of multiple elements corresponding to multiple clicking operations in the range of multiselect instruction existence time and the element row that prestore Identification code in table is matched, to determine the object element of multiple clicking operations determinations.It should be noted that multiselect instruction The sequencing of the time of origin of generation time and clicking operation is not specifically limited, and can be click on operation and multiselect instruction is same When produce or multiselect instruction produced during clicking operation.Realize and multiple elements while carry out are chosen etc. with it He operates.
Embodiment three
Fig. 3 a are a kind of flow chart for multielement exchange method that the embodiment of the present invention three provides, and the present embodiment is in above-mentioned reality On the basis of applying example, when the operation to the object element for meeting to impose a condition is drag operation, to " in response to meeting to set The operation to the object element of fixed condition " is optimized.With reference to figure 3a, this method specifically may include steps of:
S310, when current operation object is that logical boundary has at least two element of coincidence, judge that clicking operation is corresponding Whether the position in the current operation object is in the active region of element, if so, then performing S320.
S320, the object element according to corresponding to the active region determines the active region.
S330, the position for the identifier for showing trailing equipment on current page at the end of drag operation are as target Point.
Optionally, trailing equipment refers to the part that drag function can be achieved, such as mouse, lettering pen or finger etc..It can drag Drag equipment is having corresponding identifier in current display page, such as mouse is shown as hollow arrow sample on current page Formula, lettering pen or finger are shown as the pattern of lettering pen on current page.During being pulled to object element, currently The identifier for characterizing drag operation, location following drag operation of the identifier in current display page occurs on the display page Persistently move.At the end of drag operation is detected, the position of the identifier now shown on current page is obtained As target point.In a specific example, it can be kept by detecting the position of identifier in the time range of setting It is constant, then it is assumed that drag operation terminates, wherein, the time range of setting can be more than 3 seconds.It can worked as by identifier The transverse and longitudinal coordinate of the preceding display page obtains its position.
S340, the dragging starting point movement in response to corresponding to the position in the current operation object from the clicking operation The drag operation is responded to the target point, controls object element edit instruction according to corresponding to the operation to change Dispaly state.
Specifically, drag operation includes pulling starting point, drag path and pulls terminal, with clicking operation in current operation Position in object is pulls starting point, using target point mentioned above as terminal is pulled, obtains pull starting point and dragging respectively In the coordinate of current display page, drag path is not specifically limited, is defined by the requirement for meeting user, drag path can terminal To be that advance planning is good or randomly select during dragging.In a specific example, if drag path For straight line, then object element can be pulled according to straight line information;Or without specific drag path, if subsequently needed To analyze specifically holding path, then during dragging, obtain object element during pulling in real time and show currently Show the coordinate of the point in the track moved in the page, according to geometric locus corresponding to each Coordinate generation drag path, for right Drag path is analyzed.In response to the dragging starting point from the corresponding position in the current operation object of the clicking operation The target point is moved to respond the drag operation.Control object element edit instruction according to corresponding to the operation Change dispaly state.
In the embodiment of the present invention, pass through the identifier for showing trailing equipment on current page at the end of drag operation Position as target point, control the object element response corresponding in the current operation object from the clicking operation The dragging starting point of position is moved to the target point to respond the drag operation.Realized after target point is determined to target The drag operation of element.
Optionally, occur in the control object element response corresponding in the current behaviour with the clicking operation After making the position in object to pull the drag operation of starting point, in addition to:Shown when detecting corresponding to the trailing equipment When identifier is located at outside current page viewing area, the current position of the object element holding and dispaly state are controlled.
Specifically, when current display page is not device screen size, then subregion belongs to outside current display area Region.In a specific example, so that current display page is browser page as an example, that is, polynary under browser Element interaction, for example, current browser shows that the page accounts for the 60% of device screen size, then other 40% is clear area, then During being pulled to object element, show that identifier is shown positioned at 60% browser corresponding to trailing equipment detecting When outside region, then show that drag operation now is not responded, then keep the current position of object element holding with showing Show state.Optionally, current position display state includes the position relationship and hierarchical relationship with other elements of object element Deng.In the present embodiment, it is therefore prevented that invalid drag operation of the user outside current display page, only respond effective pull and grasp Make, improve between object element or the efficiency interacted between object element and other display backgrounds.
It is exemplary, the coordinate of current display page and device screen display size boundary line can also be obtained, wherein, hand over Boundary line includes coboundary boundary line, lower boundary boundary line, left margin boundary line and right margin boundary line.With device screen central point As the origin of coordinates, device screen level is X-axis positive direction to the right, and device screen level is X-axis negative direction to the left, device screen It is Y-axis positive direction vertically upward, device screen is Y-axis negative direction vertically downward.Optionally, abscissa is more than right margin boundary line The region of abscissa, abscissa is less than the region of abscissa of left margin boundary line, ordinate is more than coboundary boundary line The region for the ordinate that the region of ordinate and ordinate are less than lower boundary boundary line is outside current page viewing area Region.It is determined that the viewing area of display current page, is not responding to the operation outside viewing area, improves object element Between or the efficiency interacted between object element and other display backgrounds.
On the basis of above-mentioned technical proposal, method provided in an embodiment of the present invention also includes:If at current operation object In Mutiple Choice pattern, it is determined that the Mutiple Choice region in the current operation object;Dragged according to the drag operation of user Element positioned at the Mutiple Choice region is to target location.
Specifically, whether detection current operation object is in Mutiple Choice pattern, if, it is determined that in current operation object Mutiple Choice region.Wherein, for the element in Mutiple Choice region, can operate on it simultaneously, such as more gravity treatments Selecting includes 2 elements in region, then the two elements can simultaneously be dragged, edited or the operation such as self-defined.According to The drag operation dragging at family is located at the element in Mutiple Choice region to target location, and in a specific example, Fig. 3 b are shown A kind of display figures of multiple elements in non-operating state, Fig. 3 b include rectangle 12, pentagon 13 and five-pointed star 14.Fig. 3 c show Using the schematic diagram that lower floor's element is not blocked after this programme when having gone out a kind of interaction of multielement, wherein, Fig. 3 c include rectangle 15, Pentagon 16 and five-pointed star 17.350 be the logical boundary of rectangle 15, and rectangle 15 is located at the bottom, carried using the embodiment of the present invention It can be interacted after the scheme of confession without being blocked by other elements.
Optionally, determine that the Mutiple Choice region in the current operation object can be accomplished by the following way:According to The start position of display identifier and final position are determined including described corresponding to trailing equipment under the Mutiple Choice pattern The rectangular area of starting point and the terminal;Determine that the intersecting area of the rectangular area and each element active region is multiple Selection region.
Wherein, trailing equipment shows the starting point position of identifier by taking mouse as an example corresponding to the mouse in drag operation Put and final position, draw translucent rectangle, and when mouse discharges, calculate the translucent rectangle and activate the phase friendship on border Condition, the element intersected with it is found out, and calculate the shared frame of these elements, the region that this frame is formed is arranged to more Reselection procedure region, the element in Mutiple Choice region can realize multiple drag function.
Specifically, determining region corresponding to the translucent rectangle by the coordinate for calculating translucent four summits of rectangle, lead to The region for the current display page that activation border determines is crossed, then the region formed coordinate identical point in the two regions is phase Region corresponding to the element of friendship.These are determined on the border of upper and lower, left and right four direction by the intersecting element of analysis The shared frame of element.
In a specific example, Fig. 3 d show the signal that Mutiple Choice region is determined under a kind of Mutiple Choice pattern Figure, wherein, 360 be Mutiple Choice region, and Fig. 3 d include rectangle 18, pentagon 19 and five-pointed star 20, wherein pentagon 19 and five Angle star 20 is the element in Mutiple Choice region, and pentagon 19 and five-pointed star 20 can be pulled simultaneously.
In the embodiment of the present invention more gravity treatments are determined by drawing the translucent rectangle for including pulling starting point and dragging emphasis Region is selected, to realize the drag function in Mutiple Choice region.Optionally, multiple drag function refers in Mutiple Choice region Element follows mouse to move together.In the above-described embodiments, exemplified by the equipment for performing operation is mouse, in the behaviour to object element After work terminates, then the display data of element is changed when mouse discharges, is re-started and is rendered and show.
Example IV
Fig. 4 is a kind of structural representation for multielement interactive device that the embodiment of the present invention four provides, and the device is applied to Perform a kind of multielement exchange method that the embodiment of the present invention is supplied to.As shown in figure 4, the device can specifically include:
Judge module 410, if for detecting that current operation object is at least two elements that logical boundary has coincidence, Judge whether the corresponding position in the current operation object of clicking operation is in the active region of element;
Determining module 420, for being in the active region of element in the corresponding position in current operation object of clicking operation During domain, the object element according to corresponding to the active region determines the active region;
Respond module 430, for the operation to the object element in response to meeting to impose a condition, control the target Element edit instruction according to corresponding to the operation changes dispaly state;
Wherein, the active region of the element includes the enclosed area that the boundary line of the element and the boundary line are formed Domain, the logical boundary are that the element is in the square boundary shown during selected state.
Further, determining module 420 is specifically used for:
The identification code of the element in the active region is obtained according to the clicking operation;
The identification code of the element is matched to determine the clicking operation with the identification code in the element list that prestores Corresponding object element.
Further, determining module 420 is specifically used for:
If detecting, the multiselect instruction for occurring to have setting during the clicking operation is produced, and the multiselect is instructed The identification code of multiple elements corresponding to multiple clicking operations in the range of existence time and the mark in the element list that prestores Code is matched, to determine object element corresponding to the multiple clicking operation.
Further, the operation to the object element for meeting to impose a condition includes:Meet pair to impose a condition The drag operation of the object element;
Respond module 430 is specifically used for:
The position for the identifier that trailing equipment is shown at the end of drag operation on current page is as target point;
Institute is moved in response to the dragging starting point from the corresponding position in the current operation object of the clicking operation Target point is stated to respond the drag operation.
Further, in addition to:
Control module, for controlling the object element response to occur corresponding described current with the clicking operation After drag operation of the position for dragging starting point in operation object, identifier is shown corresponding to the trailing equipment when detecting When outside current browser page display area, the current position of the object element holding and dispaly state are controlled.
Further, in addition to:
Mutiple Choice area determination module, for when current operation object is in Mutiple Choice pattern, it is determined that described work as Mutiple Choice region in preceding operation object;
Multiple regions pull module, for the element according to the dragging of the drag operation of user positioned at the Mutiple Choice region To target location.
Further, the Mutiple Choice area determination module is specifically used for:
Start position and the final position of identifier are shown according to corresponding to the trailing equipment under the Mutiple Choice pattern It is determined that the rectangular area including the starting point and the terminal;
Determine that the rectangular area and the intersecting area of each element active region are Mutiple Choice region.
Multielement interactive device provided in an embodiment of the present invention can perform the multielement that any embodiment of the present invention provides and hand over Mutual method, possess the corresponding functional module of execution method and beneficial effect.
Embodiment five
Fig. 5 is a kind of structural representation for computer equipment that the embodiment of the present invention five provides.Fig. 5 is shown suitable for being used for Realize the block diagram of the exemplary computer device 12 of embodiment of the present invention.The computer equipment 12 that Fig. 5 is shown is only one Example, any restrictions should not be brought to the function and use range of the embodiment of the present invention.
As shown in figure 5, computer equipment 12 is showed in the form of universal computing device.The component of computer equipment 12 can be with Including but not limited to:One or more processor or processing unit 16, system storage 28, connect different system component The bus 18 of (including system storage 28 and processing unit 16).
Bus 18 represents the one or more in a few class bus structures, including memory bus or Memory Controller, Peripheral bus, graphics acceleration port, processor or the local bus using any bus structures in a variety of bus structures.Lift For example, these architectures include but is not limited to industry standard architecture (ISA) bus, MCA (MAC) Bus, enhanced isa bus, VESA's (VESA) local bus and periphery component interconnection (PCI) bus.
Computer equipment 12 typically comprises various computing systems computer-readable recording medium.These media can be it is any can be by The usable medium that computer equipment 12 accesses, including volatibility and non-volatile media, moveable and immovable medium.
System storage 28 can include the computer system readable media of form of volatile memory, such as arbitrary access Memory (RAM) 30 and/or cache memory 32.Computer equipment 12 may further include it is other it is removable/can not Mobile, volatile/non-volatile computer system storage medium.Only as an example, storage system 34 can be used for read-write not Movably, non-volatile magnetic media (Fig. 5 is not shown, is commonly referred to as " hard disk drive ").Although not shown in Fig. 5, can with There is provided for the disc driver to may move non-volatile magnetic disk (such as " floppy disk ") read-write, and to removable non-volatile The CD drive of CD (such as CD-ROM, DVD-ROM or other optical mediums) read-write.In these cases, each driving Device can be connected by one or more data media interfaces with bus 18.Memory 28 can include at least one program and produce Product, the program product have one group of (for example, at least one) program module, and these program modules are configured to perform of the invention each The function of embodiment.
Program/utility 40 with one group of (at least one) program module 42, such as memory 28 can be stored in In, such program module 42 includes --- but being not limited to --- operating system, one or more application program, other programs Module and routine data, the realization of network environment may be included in each or certain combination in these examples.Program mould Block 42 generally performs function and/or method in embodiment described in the invention.
Computer equipment 12 can also be with one or more external equipments 14 (such as keyboard, sensing equipment, display 24 Deng) communication, the equipment communication interacted with the computer equipment 12 can be also enabled a user to one or more, and/or with making Obtain any equipment that the computer equipment 12 can be communicated with one or more of the other computing device (such as network interface card, modulatedemodulate Adjust device etc.) communication.This communication can be carried out by input/output (I/O) interface 22.Also, computer equipment 12 may be used also To pass through network adapter 20 and one or more network (such as LAN (LAN), wide area network (WAN) and/or public network Network, such as internet) communication.As illustrated, network adapter 20 is led to by bus 18 and other modules of computer equipment 12 Letter.It should be understood that although not shown in Fig. 5, computer equipment 12 can be combined and use other hardware and/or software module, bag Include but be not limited to:Microcode, device driver, redundant processing unit, external disk drive array, RAID system, magnetic tape drive Device and data backup storage system etc..
Processing unit 16 is stored in program in system storage 28 by operation, so as to perform various function application and Data processing, such as realize the multielement exchange method that the embodiment of the present invention is provided:
That is, the processing unit is realized when performing described program:If detecting, current operation object has for logical boundary At least two elements overlapped, then judge the corresponding position in the current operation object of clicking operation whether in element Active region;If so, the then object element according to corresponding to the active region determines the active region;In response to meeting to set The operation to the object element of condition, object element edit instruction according to corresponding to the operation is controlled to change display State;Wherein, the active region of the element includes the closed area that the boundary line of the element and the boundary line are formed, The logical boundary is that the element is in the square boundary shown during selected state.
Embodiment six
The embodiment of the present invention six provides a kind of computer-readable recording medium, is stored thereon with computer program, the journey The multielement exchange method provided such as all inventive embodiments of the application is provided when sequence is executed by processor:
That is, the program is realized when being executed by processor:If detect in current operation object to be that logical boundary has coincidence At least two elements, then judge whether the corresponding position in the current operation object of clicking operation is in the activation of element Region;If so, the then object element according to corresponding to the active region determines the active region;In response to meeting to impose a condition The operation to the object element, control the object element according to corresponding to the operation edit instruction change show shape State;Wherein, the active region of the element includes the closed area that the boundary line of the element and the boundary line are formed, institute State the square boundary shown when logical boundary is in selected state for the element.
Any combination of one or more computer-readable media can be used.Computer-readable medium can be calculated Machine readable signal medium or computer-readable recording medium.Computer-readable recording medium for example can be --- but it is unlimited In system, device or the device of --- electricity, magnetic, optical, electromagnetic, infrared ray or semiconductor, or it is any more than combination.Calculate The more specifically example (non exhaustive list) of machine readable storage medium storing program for executing includes:Electrical connection with one or more wires, just Take formula computer disk, hard disk, random access memory (RAM), read-only storage (ROM), erasable type and may be programmed read-only storage Device (EPROM or flash memory), optical fiber, portable compact disc read-only storage (CD-ROM), light storage device, magnetic memory device, Or above-mentioned any appropriate combination.In this document, computer-readable recording medium can any include or store journey The tangible medium of sequence, the program can be commanded the either device use or in connection of execution system, device.
Computer-readable signal media can include in a base band or as carrier wave a part propagation data-signal, Wherein carry computer-readable program code.The data-signal of this propagation can take various forms, including --- but It is not limited to --- electromagnetic signal, optical signal or above-mentioned any appropriate combination.Computer-readable signal media can also be Any computer-readable medium beyond computer-readable recording medium, the computer-readable medium can send, propagate or Transmit for by instruction execution system, device either device use or program in connection.
The program code included on computer-readable medium can be transmitted with any appropriate medium, including --- but it is unlimited In --- wireless, electric wire, optical cable, RF etc., or above-mentioned any appropriate combination.
It can be write with one or more programming languages or its combination for performing the computer that operates of the present invention Program code, described program design language include object oriented program language-such as Java, Smalltalk, C++, Also include conventional procedural programming language-such as " C " language or similar programming language.Program code can be with Fully perform, partly perform on the user computer on the user computer, the software kit independent as one performs, portion Divide and partly perform or performed completely on remote computer or server on the remote computer on the user computer. Be related in the situation of remote computer, remote computer can pass through the network of any kind --- including LAN (LAN) or Wide area network (WAN)-be connected to subscriber computer, or, it may be connected to outer computer (such as carried using Internet service Pass through Internet connection for business).
Pay attention to, above are only presently preferred embodiments of the present invention and institute's application technology principle.It will be appreciated by those skilled in the art that The invention is not restricted to specific embodiment described here, can carry out for a person skilled in the art various obvious changes, Readjust and substitute without departing from protection scope of the present invention.Therefore, although being carried out by above example to the present invention It is described in further detail, but the present invention is not limited only to above example, without departing from the inventive concept, also Other more equivalent embodiments can be included, and the scope of the present invention is determined by scope of the appended claims.

Claims (10)

  1. A kind of 1. multielement exchange method, it is characterised in that including:
    If detecting, current operation object has at least two elements of coincidence for logical boundary, judges that clicking operation is corresponding in institute State the active region whether position in current operation object is in element;
    If so, the then object element according to corresponding to the active region determines the active region;
    In response to the operation to the object element for meeting to impose a condition, control the object element corresponding according to the operation Edit instruction change dispaly state;
    Wherein, the active region of the element includes the closed area that the boundary line of the element and the boundary line are formed, The logical boundary is that the element is in the square boundary shown during selected state.
  2. 2. according to the method for claim 1, it is characterised in that described that the active region is determined according to the active region Corresponding object element, including:
    The identification code of the element in the active region is obtained according to the clicking operation;
    The identification code of the element is matched to determine that the clicking operation is corresponding with the identification code in the element list that prestores Object element.
  3. 3. according to the method for claim 2, it is characterised in that described that the active region is determined according to the active region Corresponding object element, in addition to:
    If detecting, the multiselect instruction for occurring to have setting during the clicking operation is produced, and the multiselect is instructed and existed The identification code of multiple elements corresponding to multiple clicking operations in time range enters with the identification code in the element list that prestores Row matching, to determine object element corresponding to the multiple clicking operation.
  4. 4. according to the method for claim 1, it is characterised in that the behaviour to the object element for meeting to impose a condition Work includes:Meet the drag operation to the object element to impose a condition;
    Accordingly, the operation to the object element in response to meeting to impose a condition, including:
    The position for the identifier that trailing equipment is shown at the end of drag operation on current page is as target point;
    The mesh is moved in response to the dragging starting point from the corresponding position in the current operation object of the clicking operation Punctuate responds the drag operation.
  5. 5. according to the method for claim 4, it is characterised in that described in response to occurring to correspond to the clicking operation After drag operation of the position for dragging starting point in the current operation object, in addition to:
    When detect show that identifier is located at outside current page viewing area corresponding to the trailing equipment when, control the mesh Mark the current position of element holding and dispaly state.
  6. 6. according to the method for claim 4, it is characterised in that also include:
    If current operation object is in Mutiple Choice pattern, it is determined that the Mutiple Choice region in the current operation object;
    According to the dragging of the drag operation of user positioned at the Mutiple Choice region element to target location.
  7. 7. according to the method for claim 6, it is characterised in that the Mutiple Choice determined in the current operation object Region, including:
    The start position and final position that identifier is shown according to corresponding to the trailing equipment under the Mutiple Choice pattern determine Rectangular area including the starting point and the terminal;
    Determine that the rectangular area and the intersecting area of each element active region are Mutiple Choice region.
  8. A kind of 8. multielement interactive device, it is characterised in that including:
    Judge module, if for detecting that current operation object is at least two elements that logical boundary has coincidence, judge a little Hit the active region whether corresponding position in the current operation object of operation is in element;
    Determining module, when the position for being corresponded in clicking operation in current operation object is in the active region of element, root Object element corresponding to the active region is determined according to the active region;
    Respond module, for the operation to the object element in response to meeting to impose a condition, control the object element root Change dispaly state according to edit instruction corresponding to the operation;
    Wherein, the active region of the element includes the closed area that the boundary line of the element and the boundary line are formed, The logical boundary is that the element is in the square boundary shown during selected state.
  9. 9. a kind of computer equipment, including memory, processor and storage are on a memory and the meter that can run on a processor Calculation machine program, it is characterised in that the side as described in any in claim 1-7 is realized during the computing device described program Method.
  10. 10. a kind of computer-readable recording medium, is stored thereon with computer program, it is characterised in that the program is by processor The method as described in any in claim 1-7 is realized during execution.
CN201711230674.0A 2017-11-29 2017-11-29 multi-element interaction method, device, equipment and storage medium Pending CN107885437A (en)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201711230674.0A CN107885437A (en) 2017-11-29 2017-11-29 multi-element interaction method, device, equipment and storage medium
PCT/CN2018/114337 WO2019105191A1 (en) 2017-11-29 2018-11-07 Multi-element interaction method, apparatus and device, and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711230674.0A CN107885437A (en) 2017-11-29 2017-11-29 multi-element interaction method, device, equipment and storage medium

Publications (1)

Publication Number Publication Date
CN107885437A true CN107885437A (en) 2018-04-06

Family

ID=61776204

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711230674.0A Pending CN107885437A (en) 2017-11-29 2017-11-29 multi-element interaction method, device, equipment and storage medium

Country Status (2)

Country Link
CN (1) CN107885437A (en)
WO (1) WO2019105191A1 (en)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109460543A (en) * 2018-10-18 2019-03-12 北京字节跳动网络技术有限公司 A kind of input method of logical expression, device, electronic equipment and readable medium
CN109725802A (en) * 2018-12-17 2019-05-07 浙江口碑网络技术有限公司 Page interaction and device
WO2019105191A1 (en) * 2017-11-29 2019-06-06 广州视源电子科技股份有限公司 Multi-element interaction method, apparatus and device, and storage medium
CN111913637A (en) * 2020-08-28 2020-11-10 平安国际智慧城市科技股份有限公司 Component operation control method, device and storage medium
CN112506402A (en) * 2020-11-25 2021-03-16 广州朗国电子科技有限公司 Electronic whiteboard based graph control method and device and storage medium
CN114168238A (en) * 2020-08-20 2022-03-11 电子湾有限公司 Method, system, and computer-readable storage medium implemented by a computing device
CN114327215A (en) * 2022-03-15 2022-04-12 之江实验室 Method, device and medium for intelligently identifying chart brushing targets

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130167071A1 (en) * 2011-12-21 2013-06-27 International Business Machines Corporation Information processing apparatus, display processing method, program, and recording medium
CN105208329A (en) * 2015-09-06 2015-12-30 广东威创视讯科技股份有限公司 Image data selection method and related device
CN106406693A (en) * 2016-08-30 2017-02-15 腾讯科技(深圳)有限公司 Method and device for selecting image

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102368244B (en) * 2011-09-08 2013-05-15 广州市动景计算机科技有限公司 Page content alignment method, device and mobile terminal browser
CN102968259B (en) * 2012-10-29 2016-12-07 华为技术有限公司 The method and device of execution program
CN105786301B (en) * 2014-12-23 2020-03-10 阿里巴巴集团控股有限公司 Method and device for switching display object under multi-window system
CN106066874B (en) * 2016-05-27 2019-11-12 腾讯科技(深圳)有限公司 Object processing method and terminal
CN107885437A (en) * 2017-11-29 2018-04-06 广州视源电子科技股份有限公司 multi-element interaction method, device, equipment and storage medium

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130167071A1 (en) * 2011-12-21 2013-06-27 International Business Machines Corporation Information processing apparatus, display processing method, program, and recording medium
CN105208329A (en) * 2015-09-06 2015-12-30 广东威创视讯科技股份有限公司 Image data selection method and related device
CN106406693A (en) * 2016-08-30 2017-02-15 腾讯科技(深圳)有限公司 Method and device for selecting image

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2019105191A1 (en) * 2017-11-29 2019-06-06 广州视源电子科技股份有限公司 Multi-element interaction method, apparatus and device, and storage medium
CN109460543A (en) * 2018-10-18 2019-03-12 北京字节跳动网络技术有限公司 A kind of input method of logical expression, device, electronic equipment and readable medium
CN109725802A (en) * 2018-12-17 2019-05-07 浙江口碑网络技术有限公司 Page interaction and device
CN114168238A (en) * 2020-08-20 2022-03-11 电子湾有限公司 Method, system, and computer-readable storage medium implemented by a computing device
CN111913637A (en) * 2020-08-28 2020-11-10 平安国际智慧城市科技股份有限公司 Component operation control method, device and storage medium
CN111913637B (en) * 2020-08-28 2024-01-02 平安国际智慧城市科技股份有限公司 Component operation control method, device and storage medium
CN112506402A (en) * 2020-11-25 2021-03-16 广州朗国电子科技有限公司 Electronic whiteboard based graph control method and device and storage medium
CN114327215A (en) * 2022-03-15 2022-04-12 之江实验室 Method, device and medium for intelligently identifying chart brushing targets
CN114327215B (en) * 2022-03-15 2022-07-29 之江实验室 Method, device and medium for intelligently identifying object brushing of chart

Also Published As

Publication number Publication date
WO2019105191A1 (en) 2019-06-06

Similar Documents

Publication Publication Date Title
CN107885437A (en) multi-element interaction method, device, equipment and storage medium
US8823744B2 (en) Method for indicating annotations associated with a particular display view of a three-dimensional model independent of any display view
CN109976614B (en) Method, device, equipment and medium for marking three-dimensional graph
CN105511794A (en) Plotting system supporting multi-point touch gesture operation and method of system
CN108062510A (en) Dynamic display method and computer equipment during a kind of multiple target tracking fructufy
Xu et al. Global beautification of layouts with interactive ambiguity resolution
JP2505104B2 (en) Method and computer system for pointer remapping
CN112752158A (en) Video display method and device, electronic equipment and storage medium
CN107765939A (en) Interaction method and system of presentation document, readable storage medium and terminal equipment
CN111836093B (en) Video playing method, device, equipment and medium
US20220382963A1 (en) Virtual multimedia scenario editing method, electronic device, and storage medium
CN107978018A (en) Method and device for constructing three-dimensional graph model, electronic equipment and storage medium
KR20160020531A (en) Tethered selection handle
CN112799583B (en) Point location schematic drawing system based on android platform
CN113610963B (en) Three-dimensional network topology drawing method, device, computing equipment and storage medium
CN112416332B (en) Graphical programming interface display method, device, equipment and medium
US8416237B1 (en) Perspective aware automatic guide generation
Xu et al. Global beautification of 2D and 3D layouts with interactive ambiguity resolution
CN108920230B (en) Response method, device, equipment and storage medium for mouse suspension operation
CN107679219B (en) Matching method and device, interactive intelligent panel and storage medium
CN115730157A (en) Method and system for rapidly displaying lines of dwg drawing in Web
CN113849118A (en) Image identification method applied to electronic whiteboard and related device
CN114861612A (en) Text labeling method and device
CN104699866A (en) Implementation method of space table editor in human-computer interface three-dimension design system
JP4788285B2 (en) Drawing processing program, recording medium recording the drawing processing program, drawing processing method, and drawing processing system

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