JP2024521202A - ページ処理方法、装置、電子機器および可読記憶媒体 - Google Patents

ページ処理方法、装置、電子機器および可読記憶媒体 Download PDF

Info

Publication number
JP2024521202A
JP2024521202A JP2023573551A JP2023573551A JP2024521202A JP 2024521202 A JP2024521202 A JP 2024521202A JP 2023573551 A JP2023573551 A JP 2023573551A JP 2023573551 A JP2023573551 A JP 2023573551A JP 2024521202 A JP2024521202 A JP 2024521202A
Authority
JP
Japan
Prior art keywords
picture
target picture
target
position information
touch
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
JP2023573551A
Other languages
English (en)
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.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology 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 Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Publication of JP2024521202A publication Critical patent/JP2024521202A/ja
Pending legal-status Critical Current

Links

Images

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/04845Interaction 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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • 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
    • 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/0485Scrolling or panning
    • 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/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • 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/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048Indexing scheme relating to G06F3/048
    • G06F2203/04806Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048Indexing scheme relating to G06F3/048
    • G06F2203/04808Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen

Landscapes

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

Abstract

ページ処理方法、装置、電子機器および可読記憶媒体を開示し、該方法は、端末インタフェースに作用するタッチ操作に応答して、タッチ位置情報を取得し、ターゲットダイナミックページ内の各ピクチャのピクチャ位置情報を取得すること(S101)、タッチ位置情報およびピクチャ位置情報に基づいて、タッチされたターゲットピクチャおよびターゲットピクチャ位置情報を決定すること(S102)、ターゲットピクチャの位置で、ネイティブイメージビューコンポーネントを作成し、ネイティブイメージビューコンポーネントに基づいてターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動すること(S103)、ターゲットピクチャのタッチイベントがインターセプトされると、ターゲットピクチャのタッチイベントで指示されたタッチ操作に従って、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャを適宜処理すること(S104)を含む。該方法では、ユーザでは、ユーザが大画像ページにジャンプすることなく、ターゲットダイナミックページだけでページ内のピクチャのスケーリングを実現することができ、インタラクション効率を向上させることができる。【選択図】図1

Description

[関連出願]
本出願は、出願番号202110796850.7、2021年07月14日に出願され、発明名称「ページ処理方法、装置、電子機器および可読記憶媒体」の中国特許出願に基づく優先権を主張し、この中国特許出願のすべての内容は参照により本出願に組み込まれる。
[技術分野]
本開示は、情報技術分野に関し、具体的に、ページ処理方法、装置、電子機器および可読記憶媒体に関する。
インターネット技術の発展に伴い、端末ページに表示される内容がますます多様化している。内容のダイナミック表示を実現するために、通常、ハイパーテキストマークアップ言語に基づいて作成されたダイナミックウェブページが内容の表示に使用されている。
現在、ダイナミックウェブページのピクチャを拡大表示する場合、通常、まず端末インタフェース上のダイナミックウェブページのピクチャをクリックし、端末インタフェースが大画像を表示するページにジャンプし、その後、大画像ページでピクチャ拡大というジェスチャーを行う操作ステップを実行する必要がある。
上記ダイナミックウェブページ中のピクチャを拡大する過程は、操作が煩雑で、インタラクション効率が低い。
本開示の実施例は、少なくともページ処理方法、装置、電子機器および可読記憶媒体を提供する。
第1態様において、本開示の実施例ページ処理方法を提供し、
端末インタフェースに作用するタッチ操作に応答して、タッチ位置情報を取得し、前記端末インタフェースに表示されたターゲットのダイナミックページ内の各ピクチャのピクチャ位置情報を取得すること、
前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得すること、
前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、作成ネイティブイメージビューコンポーネント前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動すること、
前記ターゲットピクチャのタッチイベントがインターセプトされると、前記ターゲットピクチャのタッチイベントで指示されたタッチ操作にしたがって、前記ネイティブイメージビューコンポーネントレンダリングの前記ターゲットピクチャを適宜処理すること、を含む。
選択可能な実施形態では、前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得することは、
前記ターゲットダイナミックページ内の前記各ピクチャのピクチャ位置情報、および前記ターゲットダイナミックページと前記端末インタフェース間の座標系変換関係に基づいて、前記端末インタフェースにおける前記各ピクチャのピクチャ位置情報を決定すること、
前記端末インタフェースにおける前記タッチ位置情報および決定された前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得することを含む。
選択可能な実施形態では、前記端末インタフェースにおける前記タッチ位置情報および決定された前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャを決定することは、
前記タッチ位置情報で指示されたタッチ位置点が複数のタッチ位置点である場合、前記端末インタフェースにおける前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャから、対応するピクチャ領域が前記複数のタッチ位置点を含むピクチャを前記ターゲットピクチャとして選択することを含む。
選択可能な実施形態では、前記ターゲットピクチャのタッチイベントで指示されたタッチ操作に基づいて、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングして更新することで、前記ターゲットピクチャの表示属性を更新することは、
前記タッチ位置情報の変更に応じて、前記ターゲットピクチャのスケーリング属性情報を決定すること、前記スケーリング属性情報はスケーリング比率およびスケーリング方向を含み、
前記スケーリング属性情報に従って、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングして更新することにより、前記ターゲットピクチャの表示属性を更新することを含む。
選択可能な実施形態では、前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得した後に、前記方法は、
前記ターゲットピクチャ位置で、前記ターゲットダイナミックページ内のターゲットピクチャの大きさと一致するプレースホルダピクチャを追加することをさらに含み、前記プレースホルダピクチャは、前記ネイティブイメージビューコンポーネントでレンダリングされたターゲットピクチャの下方であって、前記ターゲットダイナミックページ内のターゲットピクチャの上方に位置する。
選択可能な実施形態では、
前記タッチ操作が停止したことを検出したとき、前記ネイティブイメージビューコンポーネントに基づいて、前記ターゲットピクチャをアニメーションレンダリングし、前記ターゲットダイナミックページ内のターゲットピクチャの大きさと一致するように、前記ターゲットピクチャを前記ターゲットピクチャ位置に復元させる。
選択可能な実施形態では、前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動する前に、
前記タッチ位置情報に基づいて、前記端末インタフェースに複数のタッチ位置点が存在するかどうかを判定すること、
前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動することは、
複数のタッチ位置点が存在すると判定した場合、前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動することを含む。
第2態様において、本開示の実施例は、ページ処理装置をさらに提供し、
端末インタフェースに作用するタッチ操作に応答して、タッチ位置情報を取得し、前記端末インタフェースに表示されたターゲットダイナミックページ内の各ピクチャのピクチャ位置情報を取得するための取得モジュールと、
前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得するための決定モジュールと、
前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動するためのレンダリングモジュールと、
前記ターゲットピクチャのタッチイベントがインターセプトされると、前記ターゲットピクチャのタッチイベントで指示されたタッチ操作にしたがって、前記ネイティブイメージビューコンポーネントレンダリングの前記ターゲットピクチャを適宜処理するための処理モジュールと、を備える。
第3態様において、本開示の実施例はコンピュータ装置をさらに提供し、プロセッサ、メモリおよびバスを備え、前記メモリは前記プロセッサが実行可能な機器可読指令を記憶しており、コンピュータ装置が動作すると、前記プロセッサは前記メモリとバスを介して通信し、前記機器可読指令が前記プロセッサによって実行されると、上記第1態様、または第1態様の任意の可能な実施形態中のステップを実行する。
第4態様において、本開示の実施例はコンピュータ可読記憶媒体をさらに提供し、該コンピュータ可読記憶媒体にコンピュータプログラムが記憶されており、該コンピュータプログラムがプロセッサによって実行されると、上記第1態様、または第1態様の任意の可能な実施形態中のステップを実行する。
本開示の実施例が提供するページ処理方法、装置、電子機器および可読記憶媒体は、ターゲットピクチャ位置でネイティブイメージビューコンポーネントを作成し、ネイティブイメージビューコンポーネントに基づいてターゲットピクチャをレンダリングし、その後、スクリーンインターセプトイベントメカニズムに基づいて、ターゲットピクチャのタッチイベントをインターセプトし、次にターゲットピクチャのタッチイベントで指示されたタッチ操作に従って、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャを適宜処理することにより、ターゲットダイナミックページ内のピクチャをジェスチャースケーリング、ドラッグする表示効果を実現し、本開示の実施例では、ターゲットダイナミックページ内のターゲットピクチャをクリックして大画像ページにジャンプしてピクチャの関連操作を実行する必要がなく、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャだけで、ピクチャのスケーリング、ドラッグなどの閲覧操作を実現することができ、操作ステップを削減し、インタラクション効率を向上させることができる。
さらに、本開示の実施例が提供するページ処理方法では、ターゲットピクチャの位置で、ターゲットピクチャの大きさと一致するプレースホルダピクチャを追加し、プレースホルダピクチャがターゲットピクチャの下方であってターゲットピクチャの上方に位置し、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャがスケーリングドラッグされる場合、プレースホルダピクチャがターゲットピクチャを遮断することができ、ターゲットピクチャがタッチ対象によってスケーリング、ドラッグされたかのように見える効果を実現し、表示効果の真実性を向上させることができる。
本開示の上記目的、特徴および利点をより明白かつ理解しやすくするために、以下、より良好な実施例を添付図面とともに、以下に詳細に説明する。
本開示の実施例の技術的解決策をより明確に説明するために、実施例で使用される必要のある添付図面を簡単に説明し、ここでの添付図面が明細書に組み込まれて本明細書の一部を構成し、これらの添付図面は本開示に適合する実施例を示し、明細書とともに本開示の技術的解決策を説明するために使用される。なお、以下の添付図面は本開示のいくつかの実施例のみを例示するものであるので、範囲を限定するものと見なされるべきではなく、当業者であれば、創造的な労働をすることなく、これらの添付図面に基づいて他の関連図面を得ることができることを理解されたい。
本開示の実施例が提供するページ処理方法を示すフローチャートである。 本開示の実施例が提供する前のページをタッチする効果を示す概略図である。 本開示の実施例が提供する後のページをタッチする効果を示す概略図である。 本開示の実施例が提供する別のページ処理方法を示すフローチャートである。 本開示の実施例が提供するページ処理装置を示す概略図である。 本開示の実施例が提供するコンピュータ装置を示す概略図である。
本開示の実施例の目的、技術的解決策および利点をより明確にするために、以下、本開示の実施例の添付図面と併せて、本開示の実施例の技術的解決策を明確かつ完全に説明するが、明らかに、説明される実施例は本開示の一部の実施例に過ぎず、すべての実施例ではない。通常、ここでの添付図面に説明および記載された本開示の実施例のコンポーネントは様々な異なる構成で配置および設計され得る。したがって、添付図面が提供する本開示の実施例の以下の詳細説明は本開示の保護範囲を限定するものではなく、本開示の例示的な実施例に過ぎない。本開示の実施例に基づいて、当業者が創造的な労働をすることなく得られた他の実施例は、すべて本開示の保護範囲に含まれるものとする。
ダイナミックページ中のピクチャを拡大表示する場合、通常、まず端末インタフェースに表示されたダイナミックページ中のピクチャをクリックし、つぎに端末インタフェースが大画像ページにジャンプし、最後に大画像ページにジェスチャースケーリング、ドラッグ操作を実行して、大画像表示の目的を達成する。上記のダイナミックページ中のピクチャを拡大表示する操作ステップは比較的煩雑であり、インタラクション効率が低い。
上記研究によると、本開示はページ処理方法を提供し、ターゲットピクチャ位置でネイティブイメージビューコンポーネントを作成し、ネイティブイメージビューコンポーネントに基づいてターゲットピクチャをレンダリングし、スクリーンインターセプトイベントメカニズムに基づいて、ターゲットピクチャのタッチイベントをインターセプトし、その後ターゲットピクチャのタッチイベントで指示されたタッチ操作に従って、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャを適宜処理することにより、ターゲットダイナミックページ内のピクチャをジェスチャースケーリング、ドラッグする表示効果を実現し、本開示の実施例では、ターゲットダイナミックページ内のターゲットピクチャをクリックして大画像ページにジャンプしてピクチャの関連操作を行う必要がなく、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャだけでピクチャのスケーリング、ドラッグなどの閲覧操作を達成でき、操作ステップを削減し、インタラクション効率を向上させることができる。
以上の解決策に存在する欠陥はいずれも本発明者の実践と慎重な検討の結果であり、したがって、上記問題の発見過程と上記問題に対する本開示の解決策は、本発明者が発明を開示する過程における本開示への貢献である。
なお、類似の符号および英字は以下の添付図面において同様項目を示しているため、ある項目が添付図面で定義された後、後続の添付図面においてさらに定義および解釈する必要がない。
本実施例の理解を容易にするために、まず本開示の実施例に開示されるページ処理方法を詳細に説明するが、本開示の実施例が提供するページ処理方法の実行主体は一般に一定の計算能力を有する端末装置または他の処理装置であってもよく、端末装置はユーザ装置(User Equipment、UE)、モバイル装置、ユーザ端末、端末、携帯電話、コードレス電話、パーソナルデジタルアシスタント(Personal Digital Assistant、PDA)、手持ち装置、計算装置、車載装置、ウェアラブル装置などであってもよい。いくつかの可能な実施態様では、該ページ処理方法は、プロセッサによってメモリに記憶されたコンピュータ可読指令を呼び出すことによって実現され得る。
以下、実行主体が端末装置である場合を例にして、本開示の実施例が提供するページ処理方法を説明する。
まず、本開示の実施例が提供するページ処理方法は主に、ユーザがダイナミックページ中のピクチャ内容を閲覧するシナリオに適用され、端末装置にインストールされたターゲットアプリケーションを起動し(ターゲットアプリケーションはダイナミックページ、例えばニュース情報類のアプリケーションを含む)、ターゲットアプリケーション中の内容詳細ページを開き、該内容詳細ページがダイナミックページであり、ユーザが閲覧したい内容詳細ページに含まれるピクチャ内容をタッチ操作すると、本開示の実施例が提供するページ処理方法を実行することができる。
図1に示すように、本開示の実施例が提供するページ処理方法のフローチャートであり、前記方法は、以下のS101~S104を含む。
S101:端末インタフェースに作用するタッチ操作に応答して、タッチ位置情報を取得し、前記端末インタフェースに表示されたターゲットダイナミックページ内の各ピクチャのピクチャ位置情報を取得する。
端末インタフェースは、端末装置上のタッチスクリーン中の表示インタフェースであってもよく、ターゲットダイナミックページはページ内容または構造をダイナミックに表示可能なページを指し、例えばハイパーテキストマークアップ言語5(Hyper Text Mark up Language5、HTML5)に基づいて作成されたウェブページであってもよく、ここでH5ウェブページと略称する。なお、以下のH5ウェブページはいずれもHTML5に基づいて作成されたウェブページである。H5ページはウェブページビュー(webview)によってロードされて端末インタフェースに表示されてもよい。
通常、ターゲットダイナミックページは端末インタフェースと重なり合わず、これは、端末インタフェースがターゲットダイナミックページを表示するとき、端末インタフェースの他の表示領域にいくつかのネイティブコンポーネントによってレンダリングされた固定のページレイアウト内容が表示されるからであり、例えば端末装置にニュース情報類の内容詳細ページ(ウェブページビューロードのH5ページ)が開かれたとき、端末インタフェースに内容詳細ページの上方に文章著者情報が表示され、内容詳細ページの下方にユーザコメント内容などが表示されることがある。
ターゲットダイナミックページは、端末インタフェースに対して上下方向に移動可能であり、左右方向に移動可能である。ターゲットダイナミックページを移動することにより、ターゲットダイナミックページに端末インタフェースに表示されていない内容を表示することができる。
ターゲットダイナミックページに含まれる内容が多い場合、これらの内容が大きなスペースを占め、端末インタフェースに全体を表示することができず、ターゲットダイナミックページにスライド操作または他の任意可能な表示操作を実行し、以前に表示された内容を部分的または完全に遮蔽した後に、表示されていない内容を表示することができる。ターゲットダイナミックページに含まれる内容が少ない場合、これらの内容は端末インタフェースに全体的に表示され得、ターゲットダイナミックページに任意操作を実行する必要がなくなる。
端末インタフェースにターゲットダイナミックページが表示された後、ターゲットダイナミックページにピクチャが存在すると、まずターゲットスクリプトによりターゲットダイナミックページの各ピクチャのピクチャ位置情報を検出することができる。ターゲットダイナミックページ内の各ピクチャは、端末インタフェースに全体的に現在表示されているピクチャであってもよく、端末インタフェースに部分的に表示されたピクチャであってもよく、端末インタフェースに表示されていないピクチャであってもよい(表示されていないピクチャはターゲットダイナミックページを移動した後に表示され得る)。ピクチャ位置情報はターゲットダイナミックページ内の各ピクチャの位置情報を指す。
ターゲットスクリプトによって検出されたピクチャのピクチャ位置情報は、ターゲットダイナミックページの頂部からのピクチャの上下エッジのオフセット、ターゲットダイナミックページ左辺からのピクチャ左エッジのオフセット、およびターゲットダイナミックページ右辺からのピクチャ右エッジのオフセットを含んでもよい。
ピクチャ位置情報の説明を容易にするために、ターゲットダイナミックページに平面直角座標系を確立してもよい。可能な実施形態では、ターゲットダイナミックページの頂点を座標原点とし、該頂点に隣接する2つの辺(ターゲットダイナミックページが矩形であると仮定する)が位置する直線をそれぞれ横座標軸および縦座標軸として、平面直角座標系を確立し、ピクチャ位置情報は、平面直角座標系におけるピクチャの座標情報であり、具体的に、平面直角座標系におけるピクチャの各頂点の座標情報であってもよい。他の可能な実施形態では、ターゲットダイナミックページの他の点を原点として平面直角座標系を確立してもよく、ここで繰り返しの説明は省略する。
ターゲットダイナミックページ中の各ピクチャのピクチャ位置情報を取得した後、タッチ対象(例えばユーザの指)が端末インタフェースにタッチ操作を実行した場合、端末装置はタッチ位置を検出し、タッチ位置情報を取得することができる。ここで、タッチ位置情報は、タッチ対象が端末インタフェースにタッチして端末インタフェースに接触する位置情報を指す。
同様に、タッチ位置情報の説明を容易にするために、端末インタフェースに平面直角座標系を確立し、次に該平面直角座標系中のタッチ位置情報を取得してもよい。可能な実施形態では、端末インタフェースの頂点を原点とし、該頂点に隣接する2つの辺(端末インタフェースが矩形であると仮定する)が位置する直線をそれぞれ横座標軸と縦座標軸として平面直角座標系を確立してもよく、タッチ位置情報は、平面直角座標系中の座標情報であってもよい。なお、ここで、タッチ位置を1つの点、すなわちタッチ対象(例えばユーザの指)と端末インタフェースが接する点と見なされてもよい。複数のタッチ位置がある場合、各タッチ位置に対応する座標情報を取得してもよい。他の可能な実施形態では、端末インタフェースの他の点を原点として平面直角座標系確立をしてもよく、ここで繰り返しの説明は省略する。
可能な実施形態では、タッチ位置情報およびピクチャ位置情報の説明をより容易にするために、端末インタフェース中の左上隅の頂点およびターゲットダイナミックページの左上隅の頂点をそれぞれ原点とし(他の位置の頂点であってもよいが、端末インタフェースにおける原点としての頂点とターゲットダイナミックページにおける原点としての頂点とはそれぞれの平面において同じ相対位置にあるべきである)、座標軸方向が同じの2つの平面直角座標系を確立し、その後タッチ位置情報およびピクチャ位置情報をそれぞれ取得する。
上記実施形態では、端末インタフェースおよびターゲットダイナミックページにそれぞれ平面直角座標系を確立し、タッチ位置情報およびピクチャ位置情報をそれぞれ取得することで、タッチ位置情報およびピクチャ位置情報の精度を確保する。
可能な実施形態では、端末インタフェースまたはターゲットダイナミックページに1つの平面直角座標系を確立し、該平面直角座標系下で、タッチ位置情報を取得するだけでなく、各ピクチャのピクチャ位置情報を取得することができるが、このような実施形態は、タッチ位置情報およびピクチャ位置情報を同時に記述し、位置情報を処理する作業負荷を軽減し、ステップS102で各ピクチャのタッチされたターゲットピクチャを迅速に決定し(端末インタフェースに確立された平面直角座標系とターゲットダイナミックページに確立された平面直角座標系を座標系変換する必要がない)、しかし、このような実施形態は、端末インタフェースがターゲットダイナミックページと完全に重なり合い、ターゲットダイナミックページに含まれるピクチャがすべて表示されることを前提として実行することができる。
S102:前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得する。
前述ステップでは確立された平面直角座標系によってタッチ位置情報および各ピクチャのピクチャ位置情報を得、ここでタッチ位置情報および各ピクチャのピクチャ位置情報に基づいて、各ピクチャのうちタッチされたターゲットピクチャを決定することができる。
前述可能な実施形態では、端末インタフェースがターゲットダイナミックページと完全に重なり合い、ターゲットダイナミックページに含まれるピクチャがすべて同時に表示された場合に、端末インタフェースまたはターゲットダイナミックページに確立された平面直角座標下で、タッチ位置情報および各ピクチャのピクチャ位置情報に基づいて各ピクチャのうちタッチされたターゲットピクチャを直接決定することができる。
端末インタフェースがターゲットダイナミックページと完全に重なり合わない場合、端末インタフェースに確立された平面直角座標とターゲットダイナミックページに確立された平面直角座標を座標系変換し、すなわちタッチ位置情報および各ピクチャのピクチャ位置情報を同一座標系に変換して比較し、同一座標系下のタッチ位置情報および各ピクチャのピクチャ位置情報に基づいて、各ピクチャのうちタッチされたターゲットピクチャを決定する。
可能な実施形態では、ターゲットダイナミックページ内の平面直角座標下のピクチャ位置情報を端末インタフェース中の平面直角座標系下のピクチャ位置情報に変換してもよく、具体的に、ターゲットダイナミックページ内の各ピクチャのピクチャ位置情報、およびターゲットダイナミックページと端末インタフェース間の座標系変換関係に基づいて、端末インタフェースにおける各ピクチャのピクチャ位置情報を決定することができる。
ここでの座標系変換関係は、座標軸の変換関係および座標単位の変換関係を含み得る(ここで、主に異なる端末装置が異なるピクセル密度を有するため、異なる端末インタフェースにおけるピクチャの表示寸法が異なる場合があることを考慮する)。
具体的に、ターゲットダイナミックページ内の平面直角座標系の原点と端末インタフェース中の平面直角座標系の原点の相対位置および座標軸の方向(本開示では、ターゲットダイナミックページ内の平面直角座標系の座標軸と端末インタフェース中の平面直角座標系の座標軸の方向は同じであってもよい)に基づいて座標軸の変換関係を決定することができる。その後、端末インタフェース中のスクリーンピクセル密度に応じて座標単位の変換関係を決定し、具体的に、スクリプトによって返されたターゲットダイナミックページにおける各ピクチャのピクチャ座標単位に端末インタフェース中のスクリーンピクセル密度を乗じて、端末インタフェースにおける各ピクチャの表示座標単位を求める。
端末インタフェースにおける各ピクチャのピクチャ位置情報を決定した後、タッチ位置情報および決定された各ピクチャの端末インタフェース中のピクチャ位置情報に基づいて、各ピクチャのうちタッチされたターゲットピクチャ、およびターゲットピクチャの端末インタフェース中のターゲットピクチャ位置情報を決定してもよい。
本開示では、タッチ位置情報で指示されたタッチ位置点が複数のタッチ位置点である場合、端末インタフェースにおける各ピクチャのピクチャ位置情報に基づいて、各ピクチャから、対応するピクチャ領域が複数のタッチ位置点を含むピクチャをターゲットピクチャとして選択する。すなわち、複数のタッチ位置点の場合、複数のタッチ位置点がすべて同一ピクチャに対応するピクチャ領域内にある該ピクチャをターゲットピクチャとする。
一般に、ユーザによるピクチャのドラッグ/スケーリングはマルチフィンガー操作が要求されるため、現在の操作がマルチフィンガー操作であるかどうかを後続ステップ(すなわち下記S103)を実行する前提として判定する。具体的に、タッチ位置情報に基づいて、同一ピクチャに対応するピクチャ領域内に複数のタッチ位置点があるかどうかを判定し、同一ピクチャに対応するピクチャ領域に1つのタッチ位置点が存在する場合、長押し操作であるかどうかを検出し、長押し操作である場合、端末インタフェースにダウンロードピクチャまたは共有ピクチャの提示情報を表示し、長押し操作でない場合、現在タッチ操作に応答しないことができ、通常のスライド過程中のタッチと見なされる。同一ピクチャに対応するピクチャ領域に複数のタッチ位置点がある場合、S103のステップを実行して、ドラッグ/スケーリングの効果を得ることができる。
S103:前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動する。
ここでのネイティブイメージビューコンポーネントは、ネイティブImageView(イメージビュー)コンポーネントであってもよい。ターゲットピクチャを決定した後、ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、ネイティブイメージビューコンポーネントはターゲットピクチャに対応するピクチャアドレスをロードし、ターゲットピクチャをレンダリングしてもよく、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャが元のピクチャの位置を覆う。
ネイティブイメージビューコンポーネントによってターゲットピクチャをレンダリングした後、タッチ対象によるターゲットピクチャの各タッチ操作は端末インタフェースのスクリーンタッチイベント配信メカニズムによってインターセプトされ、その後ネイティブイメージビューコンポーネントに作用することができ、これはS104の処理である。
S104:前記ターゲットピクチャのタッチイベントがインターセプトされると、前記ターゲットピクチャのタッチイベントで指示されたタッチ操作にしたがって、前記ネイティブイメージビューコンポーネントによってレンダリングされた前記ターゲットピクチャを適宜処理する。
ここで、タッチ操作はターゲットピクチャのスケーリング操作であってもよく、ターゲットピクチャのタッチイベントで指示されたタッチ操作に従って、ターゲットピクチャのスケーリング属性情報を決定することができ、スケーリング属性情報はスケーリング比率およびスケーリング方向を含む。
具体的に、タッチ操作に従ってタッチ位置情報の変更を決定することができ、タッチ位置情報の変更は、タッチ位置間距離の変更およびタッチ位置の相対方向の変更を含んでもよく、ここでタッチ位置情報の変更に基づくものである。
ここで、スケーリング比率は、ターゲットピクチャスケーリング後とスケーリング前の比率を指し、スケーリング方向はターゲットピクチャスケーリング後とスケーリング前の相対方向を指す。
その後、スケーリング属性情報に従って、ネイティブイメージビューコンポーネントに基づいてターゲットピクチャをレンダリング更新して、ターゲットピクチャの表示属性を更新する。ここで、ターゲットピクチャの表示属性は、ターゲットピクチャの表示寸法および/または表示位置情報を指す。スケーリング属性情報が決定された後、スケーリング比率およびスケーリング方向に基づいて、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャの表示寸法および/または表示位置情報を更新することができる。図2は前のページをタッチする効果概略図であり、図2に元のターゲットダイナミックページ内のターゲットピクチャが示され、図3は後のページをタッチする効果を示す概略図であり、元のターゲットダイナミックページ内のターゲットピクチャのタッチイベントがインターセプトされ、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャを拡大し、ターゲットダイナミックページ内のターゲットピクチャが拡大されたかような表示効果があり、ターゲットピクチャの表示寸法およびターゲットピクチャ中の内容が同期して拡大される。
タッチ対象がネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャをタッチ操作するとき、元のターゲットダイナミックページ中のターゲットピクチャ位置のターゲットピクチャが依然として存在し、常にターゲットダイナミックページに存在しているので、タッチ対象がスケーリングドラッグしているネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャのように自由に移動することができない。元のターゲットダイナミックページ内のターゲットピクチャがタッチ対象によってスケーリング、ドラッグされて移動するような効果を得るために、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャがスケーリングドラッグされる場合、ターゲットピクチャの位置で、1つのイメージビュー(view)コンポーネントを作成し、viewコンポーネントによってターゲットダイナミックページ内のターゲットピクチャの大きさと一致するプレースホルダピクチャをレンダリングし、プレースホルダピクチャは灰色ピクチャであってもよく、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャの下方であってターゲットダイナミックページ内のターゲットピクチャの上方に追加され、該プレースホルダピクチャの位置と大きさがターゲットダイナミックページ内のターゲットピクチャを完全に覆うことを確保する。タッチ対象がネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャをタッチし始めるとき、該プレースホルダピクチャが表示され、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャがターゲットダイナミックページ内のターゲットピクチャの真上にあるので、タッチ対象のタッチ位置の変更に伴い、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャの表示属性がタイムリー変更し、同時にターゲットダイナミックページ内のターゲットピクチャがプレースホルダピクチャによって遮蔽され、タッチ対象がターゲットダイナミックページ内のターゲットピクチャをドラッグしてスケーリングすることができるような実際効果が得られる。
タッチ操作が停止したことを検出した場合、ネイティブイメージビューコンポーネントに基づいてターゲットピクチャをアニメーションレンダリングし、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャを元のピクチャ位置で復元させ、元のピクチャの大きさに復元させる。すなわち、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャがタッチ操作の停止位置からターゲットダイナミックページ内のターゲットピクチャが位置する位置に移動し、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャの寸法をターゲットダイナミックページ内のターゲットピクチャの寸法に復元させ、例示的に、アニメーション持続時間を200msに設定してもよい。アニメーションが終了した後、つまりネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャがターゲットダイナミックページ内のターゲットピクチャ位置で復元され、ターゲットダイナミックページ内のターゲットピクチャの大きさと一致した後に、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャおよびプレースホルダピクチャを削除し、このとき、ターゲットダイナミックページ内のターゲットピクチャが端末インタフェースに表示され、タッチ対象がタッチ操作を介してターゲットダイナミックページ内のターゲットピクチャをスケーリング、ドラッグなどして、ターゲットダイナミックページ内のターゲットピクチャをタッチ対象の端末インタフェースに物理的に移動したような実際視覚効果が得られ、タッチ操作が停止するとターゲットダイナミックページ内のターゲットピクチャが自動的に元に戻される。なお、本開示のネイティブイメージビューコンポーネントはスケーリング、ドラッグなどのタッチ操作をサポートするだけでなく、任意のタッチインタラクション操作、例えばクリック、ダブルクリック、長押し、手書き入力などの操作もサポートすることに留意されたい。
本開示の実施例が提供するページ処理方法をより明確に説明するために、図4は具体的なページ処理過程のフローチャートであり、例えば、図4に示すように、端末装置にインストールされたターゲットアプリケーションを起動し、ターゲットアプリケーション中のターゲットダイナミックページを開いた後に、端末装置に表示されたターゲットダイナミックページ内の各ピクチャ、Javaスクリプト(javascript)は、ターゲットダイナミックページ内の各ピクチャのピクチャ位置情報を検出することができる。
指で端末インタフェースにタッチ操作を行う場合、端末インタフェースに作用するタッチ操作に応答して、各指の端末インタフェース上のタッチ位置情報を取得した後、各指のタッチ位置情報および各ピクチャのピクチャ位置情報に基づいて、指がピクチャをタッチしたかどうかを判定し、指がピクチャをタッチした場合、同一ピクチャに対応するピクチャ領域内に複数のタッチ位置点が存在するかどうかをさらに判定し、同一ピクチャに対応するピクチャ領域に1つのタッチ位置点がある場合、長押し操作であるかどうかを検出し、長押し操作である場合、端末インタフェースにダウンロードピクチャまたは共有ピクチャの提示情報を表示し、長押し操作でない場合、現在のタッチ操作に応答しなく、通常のスライド過程中のタッチと見なされる。同一ピクチャに対応するピクチャ領域に複数のタッチ位置点がある場合、ピクチャ領域が複数のタッチ位置点を含むピクチャとターゲットピクチャとする。
その後、ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、1つのネイティブのImageViewコンポーネントを作成し、ImageViewコンポーネントによってターゲットピクチャをレンダリングし、ターゲットピクチャに対する指の各タッチ操作はスクリーンタッチイベント配信メカニズムによってインターセプトされ、その後ネイティブイメージビューコンポーネントに作用することができる。
1つの単純なネイティブviewコンポーネントを作成し、viewコンポーネントによってターゲットピクチャの大きさと一致する灰色プレースホルダピクチャをレンダリングすることも可能である。灰色プレースホルダピクチャは、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャの下方であって、ターゲットダイナミックページ内のターゲットピクチャの上方に追加され、該プレースホルダピクチャの位置と大きさがターゲットダイナミックページ内のターゲットピクチャを完全に覆うことができる。
次に、スクリーンにスケーリングドラッグなどの操作が実行されたかどうかを判定し、スクリーンにスケーリングドラッグなどの操作が実行されないとき、応答せず、指がピクチャをタッチするかどうかを監視を続けることがある。指によるスケーリングドラッグ操作が実行されると、タッチ対象のタッチ位置の変更につれて、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャの表示属性がタイムリー変更する。同時に、ターゲットダイナミックページ内のターゲットピクチャがプレースホルダピクチャによって遮蔽され、タッチ対象がターゲットダイナミックページ内のターゲットピクチャをドラッグしてスケーリングするような実際効果が得られる。
指のタッチ操作が停止すると、ネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャはアニメーションによってタッチ操作の停止位置から元のターゲットピクチャが位置する位置に復元され、元のピクチャの大きさに復元され、最後にネイティブイメージビューコンポーネントによってレンダリングされたターゲットピクチャおよびプレースホルダピクチャが削除され、このとき、ターゲットダイナミックページ内のターゲットピクチャが端末インタフェースに再表示される。
当業者であれば、具体的な実施形態の上記方法では、各ステップの順序は厳密な実行順序による実施過程の制限を意味するものではなく、各ステップの具体的な実行順序はその機能および可能な内部論理によって決定されるべきであることを理解されたい。
同様の発明思想に基づいて、本開示の実施例は、ページ処理方法に対応するページ処理装置をさらに提供し、本開示の実施例中の装置は、本開示の実施例に記載のページ処理方法と同様の原理によって問題を解決するものであるため、装置の実施は方法の実施を参照すればよく、繰り返しの説明は省略する。
図5に示すように、本開示の実施例が提供するページ処理装置のアーキテクチャ概略図であり、前記装置は、取得モジュール501、第1決定モジュール502、レンダリングモジュール503、処理モジュール504を備え、
取得モジュール501は、端末インタフェースに作用するタッチ操作に応答して、タッチ位置情報を取得し、前記端末インタフェースに表示されたターゲットダイナミックページ内の各ピクチャのピクチャ位置情報を取得するために使用され、
第1決定モジュール502は、前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得するために使用され、
レンダリングモジュール503は、前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動するために使用され、
処理モジュール504は、前記ターゲットピクチャのタッチイベントがインターセプトされると、前記ターゲットピクチャのタッチイベントで指示されたタッチ操作にしたがって、前記ネイティブイメージビューコンポーネントによってレンダリングされた前記ターゲットピクチャを適宜処理するために使用される。
本開示の実施例は、ターゲットピクチャ位置でネイティブイメージビューコンポーネントを作成し、ネイティブイメージビューコンポーネントによってレンダリング前記ターゲットピクチャに基づいて、タッチイベントで指示されたタッチ操作に従ってネイティブイメージビューコンポーネントによってレンダリングされた前記ターゲットピクチャを適宜処理し、ターゲットダイナミックページ内のターゲットピクチャをクリックして大画像ページにジャンプしてピクチャの関連操作を実行する必要がなく、ターゲットダイナミックページだけでピクチャのスケーリング、ドラッグなどの閲覧操作を実現でき、操作ステップを削減し、インタラクション効率を向上させることができる。
可能な実施形態では、第1決定モジュール502は、具体的に、前記ターゲットダイナミックページ内の前記各ピクチャのピクチャ位置情報、および前記ターゲットダイナミックページと前記端末インタフェース間の座標系変換関係に基づいて、前記端末インタフェースにおける前記各ピクチャのピクチャ位置情報を決定するために使用され、
前記タッチ位置情報および決定された前記各ピクチャの前記端末インタフェースにおけるピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得する。
可能な実施形態では、第1決定モジュール502は、具体的に、前記タッチ位置情報で指示されたタッチ位置点が複数のタッチ位置点である場合、前記端末インタフェースにおける前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャから、対応するピクチャ領域が前記複数のタッチ位置点を含むピクチャを前記ターゲットピクチャとして選択する。
可能な実施形態では、処理モジュール504は、具体的に、前記ターゲットピクチャのタッチイベントで指示されたタッチ操作に基づいて、前記ターゲットピクチャのスケーリング属性情報を決定するために使用され、前記スケーリング属性情報はスケーリング比率およびスケーリング方向を含み、
前記スケーリング属性情報に従って、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングして更新することにより、前記ターゲットピクチャの表示属性を更新する。
可能な実施形態では、前記ターゲットピクチャ位置で、前記ターゲットダイナミックページ内のターゲットピクチャの大きさと一致するプレースホルダピクチャを追加するために使用される追加モジュールをさらに備え、前記プレースホルダピクチャは、前記ネイティブイメージビューコンポーネントでレンダリングされたターゲットピクチャの下方であって、前記ターゲットダイナミックページ内のターゲットピクチャの上方に位置する。
可能な実施形態では、処理モジュール504は、具体的に、前記タッチ操作が停止したことを検出したとき、前記ネイティブイメージビューコンポーネントに基づいて、前記ターゲットピクチャをアニメーションレンダリングし、前記ターゲットダイナミックページ内のターゲットピクチャの大きさと一致するように、前記ターゲットピクチャを前記ターゲットピクチャ位置に復元させるために使用される。
可能な実施形態では、前記タッチ位置情報に基づいて、前記端末インタフェースに複数のタッチ位置点が存在するかどうかを判定するために使用される第2決定モジュールをさらに備え、
前記レンダリングモジュール503は、具体的に、複数のタッチ位置点が存在すると判定した場合、前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動するために使用される。
装置の各モジュールの処理フロー、および各モジュール間のインタラクションフローの説明は、上記方法の実施例の関連説明を参照すればよく、詳細な説明は省略する。
同様の技術思想に基づいて、本開示の実施例はコンピュータ装置をさらに提供する。図6に示すように、本開示の実施例が提供するコンピュータ装置600の構造概略図であり、プロセッサ601、メモリ602、およびバス603を備える。ここで、メモリ602は実行指令を記憶するために使用され、内部メモリ6021および外部メモリ6022を備え、ここでの内部メモリ6021は内部メモリとも呼ばれ、プロセッサ601の演算データ、およびハードディスクなどの外部メモリ6022との交換データを一時記憶するために使用され、プロセッサ601は、内部メモリ6021を介して外部メモリ6022とデータを交換し、コンピュータ装置600が動作すると、プロセッサ601はメモリ602とバス603を介して通信し、プロセッサ601は以下の指令を実行し:
端末インタフェースに作用するタッチ操作に応答して、タッチ位置情報を取得し、前記端末インタフェースに表示されたターゲットダイナミックページ内の各ピクチャのピクチャ位置情報を取得し、
前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得し、
前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動し、
前記ターゲットピクチャのタッチイベントがインターセプトされると、前記ターゲットピクチャのタッチイベントで指示されたタッチ操作にしたがって、前記ネイティブイメージビューコンポーネントによってレンダリングされた前記ターゲットピクチャを適宜処理する。
本開示の実施例は、コンピュータ可読記憶媒体をさらに提供し、該コンピュータ可読記憶媒体はコンピュータプログラムを記憶しており、該コンピュータプログラムがプロセッサによって実行されると、上記方法実施例に記載のページ処理方法のステップを実行する。ここで、該記憶媒体は、揮発性または不揮発性コンピュータ可読記憶媒体であってもよい。
本開示の実施例は、コンピュータプログラム製品をさらに提供し、該コンピュータ製品にプログラムコードが担持され、前記プログラムコードに含まれる指令は上記方法実施例に記載のページ処理方法のステップを実行するために使用され、具体的に上記方法実施例を参照すればよく、繰り返しの説明は省略する。
ここで、上記コンピュータプログラム製品は具体的に、ハードウェア、ソフトウェアまたはそれらの組み合わせによって実現され得る。1つの選択可能な実施例では、前記コンピュータプログラム製品は具体的にコンピュータ記憶媒体として具現化され、もう1つの選択可能な実施例では、コンピュータプログラム製品は具体的にソフトウェア製品、例えばソフトウェア開発キット(Software Development Kit、SDK)などとして具現化され得る。
説明の便宜および簡潔さのために、当業者は、上記説明したシステムおよび装置の具体的な作業工程は、前述方法実施例の対応工程を参照すればよく、繰り返しの説明は省略する。本開示が提供するいくつかの実施例では、開示されたシステム、装置および方法は、他の形態で実施されてもよいことを理解されたい。上述した装置実施例は例示的なものであり、例えば、前記ユニットの分割は論理機能の分割に過ぎず、実際に実装される際に別の方法で分割されてもよく、例えば、複数のユニットまたはコンポーネントを組み合わせてもよく、またはもう1つのシステムに統合してもよく、またはいくつかの特徴を無視または実行しなくてもよい。別の点で、図示または議論されている相互間の結合または直接的な結合または通信接続は、いくつかの通信インタフェース、装置またはユニットを介した間接結合または通信接続であってもよく、電気的、機械的または他の形態であってもよい。
前記分離部材として説明されたユニットは物理的に分離されていてもでなくてもよく、ユニットとして表示された部材は物理的なユニットであってもでなくてもよく、すなわち、単一場所に配置されてもよく、または複数のネットワークユニットに分散されてもよい。本実施例の目的を解決するために、実際のニーズに応じてそれらのユニットの一部または全部を選択してもよい。
さらに、本開示の各実施例における各機能ユニットは単一の処理ユニットに統合されてもよく、各ユニットが単独で物理的に存在してもよく、2つまたは2つ以上のユニットが単一のユニットに統合されてもよい。
前記機能は、ソフトウェア機能ユニットとして実現され、スタンドアロン製品として販売または使用される場合、プロセッサが実行可能な不揮発性のコンピュータ可読記憶媒体に記憶されてもよい。このような理解に基づいて、本開示の技術的解決策は、実質的に、または現在技術に対する貢献としての部分または該技術的解決策の部分はソフトウェア製品として具現化されてもよく、該コンピュータソフトウェア製品は記憶媒体に記憶され、1台のコンピュータ装置(パーソナルコンピュータ、サーバ、またはネットワーク装置など)に本開示の各実施例に記載の方法の全部または一部のステップを実行させるためのいくつかの指令を含んでもよい。前述の記憶媒体は、USBフラッシュドライブ、リムーバブルハードディスク、読み取り専用メモリ(Read-Only Memory、ROM)、ランダムアクセスメモリ(Random Access Memory、RAM)、磁気ディスクまたは光ディスクなどの様々なプログラムコードを記憶可能な媒体を含んでもよい。
最後に、上述した実施例は本開示の具体的な実施形態に過ぎず、本開示の技術的解決策を説明するものであり、制限するものではなく、本開示の保護範囲はここに限定されなく、前述実施例を参照して本開示を詳細に説明したが、当業者であれば、当該技術分野に精通した当業者は本開示に開示された技術的範囲内において、前述実施例に記載の技術的解決策を修正できるか、または変更を容易に想到でき、または一部の技術的特徴を等価置換でき、これらの修正、変更または置換は、対応する技術的解決策の本質を本開示の実施例の技術的解決策の精神および範囲から外すものではなく、すべて本開示の保護範囲内に含まれる。したがって、本開示の保護範囲は、特許請求の範囲の保護範囲に従うものとする。

Claims (10)

  1. 端末インタフェースに作用するタッチ操作に応答して、タッチ位置情報を取得し、前記端末インタフェースに表示されたターゲットダイナミックページ内の各ピクチャのピクチャ位置情報を取得すること、
    前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得すること、
    前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動すること、
    前記ターゲットピクチャのタッチイベントがインターセプトされると、前記ターゲットピクチャのタッチイベントで指示されたタッチ操作にしたがって、前記ネイティブイメージビューコンポーネントに基づきレンダリングされた前記ターゲットピクチャを適宜処理すること、を含む、ことを特徴とするページ処理方法。
  2. 前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得することは、
    前記ターゲットダイナミックページ内の前記各ピクチャのピクチャ位置情報、および前記ターゲットダイナミックページと前記端末インタフェース間の座標系変換関係に基づいて、前記端末インタフェースにおける前記各ピクチャのピクチャ位置情報を決定すること、
    前記端末インタフェースにおける前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得することを含む、ことを特徴とする請求項1に記載のページ処理方法。
  3. 前記端末インタフェースにおける前記タッチ位置情報および決定された前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャを決定することは、
    前記タッチ位置情報で指示されたタッチ位置点が複数のタッチ位置点である場合、前記端末インタフェースにおける前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャから、対応するピクチャ領域が前記複数のタッチ位置点を含むピクチャを前記ターゲットピクチャとして選択することを含む、ことを特徴とする請求項2に記載のページ処理方法。
  4. 前記ターゲットピクチャのタッチイベントで指示されたタッチ操作にしたがって、前記ネイティブイメージビューコンポーネントに基づきレンダリングされた前記ターゲットピクチャを適宜処理することは、
    前記ターゲットピクチャのタッチイベントで指示されたタッチ操作に基づいて、前記ターゲットピクチャのスケーリング属性情報を決定すること、前記スケーリング属性情報はスケーリング比率およびスケーリング方向を含み、
    前記スケーリング属性情報に従って、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングして更新する、ことを特徴とする請求項1に記載のページ処理方法。
  5. 前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得した後に、前記ページ処理方法は、
    前記ターゲットピクチャ位置で、前記ターゲットダイナミックページ内のターゲットピクチャの大きさと一致するプレースホルダピクチャを追加することをさらに含み、前記プレースホルダピクチャは、前記ネイティブイメージビューコンポーネントでレンダリングされたターゲットピクチャの下方であって、前記ターゲットダイナミックページ内のターゲットピクチャの上方に位置する、ことを特徴とする請求項1に記載のページ処理方法。
  6. 前記タッチ操作が停止したことを検出したとき、前記ネイティブイメージビューコンポーネントに基づいて、前記ターゲットピクチャをアニメーションレンダリングし、前記ターゲットダイナミックページ内のターゲットピクチャの大きさと一致するように、前記ターゲットピクチャを前記ターゲットピクチャ位置に復元させることをさらに含む、ことを特徴とする請求項1に記載のページ処理方法。
  7. 前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動する前に、
    前記タッチ位置情報に基づいて、前記端末インタフェースに複数のタッチ位置点が存在するかどうかを判定することをさらに含み、
    前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動することは、
    複数のタッチ位置点が存在すると判定した場合、前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、ネイティブイメージビューコンポーネントを作成し、前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動することを含む、ことを特徴とする請求項1に記載のページ処理方法。
  8. 端末インタフェースに作用するタッチ操作に応答して、タッチ位置情報を取得し、前記端末インタフェースに表示されたターゲットダイナミックページ内の各ピクチャのピクチャ位置情報を取得するために使用される取得モジュールと、
    前記タッチ位置情報および前記各ピクチャのピクチャ位置情報に基づいて、前記各ピクチャにおけるタッチされたターゲットピクチャ、および前記端末インタフェースにおける前記ターゲットピクチャのターゲットピクチャ位置情報を取得するために使用される決定モジュールと、
    前記ターゲットピクチャ位置情報で指示されたターゲットピクチャ位置で、作成ネイティブイメージビューコンポーネント前記ネイティブイメージビューコンポーネントに基づいて前記ターゲットピクチャをレンダリングし、スクリーンタッチイベントインターセプトメカニズムを起動するためのレンダリングモジュールと、
    前記ターゲットピクチャのタッチイベントがインターセプトされると、前記ターゲットピクチャのタッチイベントで指示されたタッチ操作にしたがって、前記ネイティブイメージビューコンポーネントに基づきレンダリングされた前記ターゲットピクチャを適宜処理するための処理モジュールと、を備える、ことを特徴とするページ処理装置。
  9. プロセッサ、メモリおよびバスを備え、前記メモリは前記プロセッサが実行可能な機器可読指令を記憶しており、コンピュータ装置が動作すると、前記プロセッサは前記メモリとバスを介して通信し、前記機器可読指令が前記プロセッサによって実行されると請求項1~7のいずれか1項に記載のページ処理方法のステップを実行する、ことを特徴とするコンピュータ装置。
  10. コンピュータプログラムを記憶したコンピュータ可読記憶媒体であって、該コンピュータプログラムがプロセッサによって実行されると、請求項1~7のいずれか1項に記載のページ処理方法のステップを実行する、ことを特徴とするコンピュータ可読記憶媒体。
JP2023573551A 2021-07-14 2022-06-07 ページ処理方法、装置、電子機器および可読記憶媒体 Pending JP2024521202A (ja)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
CN202110796850.7 2021-07-14
CN202110796850.7A CN113536173B (zh) 2021-07-14 2021-07-14 一种页面处理方法、装置、电子设备及可读存储介质
PCT/CN2022/097301 WO2023284442A1 (zh) 2021-07-14 2022-06-07 一种页面处理方法、装置、电子设备及可读存储介质

Publications (1)

Publication Number Publication Date
JP2024521202A true JP2024521202A (ja) 2024-05-28

Family

ID=78099122

Family Applications (1)

Application Number Title Priority Date Filing Date
JP2023573551A Pending JP2024521202A (ja) 2021-07-14 2022-06-07 ページ処理方法、装置、電子機器および可読記憶媒体

Country Status (4)

Country Link
EP (1) EP4339808A1 (ja)
JP (1) JP2024521202A (ja)
CN (1) CN113536173B (ja)
WO (1) WO2023284442A1 (ja)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113536173B (zh) * 2021-07-14 2024-01-16 抖音视界有限公司 一种页面处理方法、装置、电子设备及可读存储介质
CN114491372B (zh) * 2022-02-08 2023-09-08 北京有竹居网络技术有限公司 页面处理方法、装置、电子设备及存储介质
CN115904148A (zh) * 2022-11-14 2023-04-04 京东方科技集团股份有限公司 触控事件的处理方法及装置、存储介质、电子设备
CN116991528B (zh) * 2023-08-14 2024-03-19 腾讯科技(深圳)有限公司 一种页面切换方法、装置、存储介质和电子设备

Family Cites Families (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102012914A (zh) * 2010-11-22 2011-04-13 深圳市斯尔顿科技有限公司 一种网页图像的处理方法和装置
CN103279293A (zh) * 2013-04-27 2013-09-04 天脉聚源(北京)传媒科技有限公司 一种切换图片的方法、装置和终端
US10795547B1 (en) * 2014-06-11 2020-10-06 Amazon Technologies, Inc. User-visible touch event queuing
CN104077387B (zh) * 2014-06-27 2018-03-02 北京奇虎科技有限公司 一种网页内容显示方法和浏览器装置
CN105988702B (zh) * 2015-03-02 2019-08-06 阿里巴巴集团控股有限公司 查看对象图片的方法及系统
CN106909354A (zh) * 2015-12-22 2017-06-30 北京奇虎科技有限公司 图片显示方法及装置
CN106406855A (zh) * 2016-08-26 2017-02-15 乐视控股(北京)有限公司 一种基于浏览器的图片处理方法及装置
CN108182021A (zh) * 2018-01-30 2018-06-19 腾讯科技(深圳)有限公司 多媒体信息展示方法、装置、存储介质及设备
CN108319414A (zh) * 2018-01-31 2018-07-24 北京小米移动软件有限公司 界面显示方法及装置
CN110221722B (zh) * 2019-05-27 2022-09-30 掌阅科技股份有限公司 图片处理方法、电子设备及存储介质
CN110413913A (zh) * 2019-07-04 2019-11-05 北京字节跳动网络技术有限公司 一种页面刷新方法、装置、终端及存储介质
CN111736740B (zh) * 2020-03-24 2022-06-07 北京沃东天骏信息技术有限公司 图片热区生成方法、装置、设备和存储介质
CN111459363B (zh) * 2020-03-31 2023-07-21 腾讯科技(深圳)有限公司 信息展示方法、装置、设备及存储介质
CN112419137A (zh) * 2020-07-30 2021-02-26 上海幻电信息科技有限公司 遮罩图片显示方法、装置及遮罩图片显示方法、装置
CN112053286B (zh) * 2020-09-04 2023-09-05 抖音视界有限公司 图像处理方法、装置、电子设备和可读介质
CN112578971B (zh) * 2020-12-07 2023-02-10 腾讯科技(深圳)有限公司 页面内容展示方法、装置、计算机设备及存储介质
CN113536173B (zh) * 2021-07-14 2024-01-16 抖音视界有限公司 一种页面处理方法、装置、电子设备及可读存储介质

Also Published As

Publication number Publication date
CN113536173B (zh) 2024-01-16
EP4339808A1 (en) 2024-03-20
WO2023284442A1 (zh) 2023-01-19
CN113536173A (zh) 2021-10-22

Similar Documents

Publication Publication Date Title
JP2024521202A (ja) ページ処理方法、装置、電子機器および可読記憶媒体
US9389777B2 (en) Gestures for manipulating tables, charts, and graphs
US9092121B2 (en) Copy and paste experience
US10460014B2 (en) Scrolling in large hosted data set
KR102307163B1 (ko) 크로스 플랫폼 렌더링 엔진
JP5171968B2 (ja) ウェブベースコンテンツのレンダリングの加速
US10775971B2 (en) Pinch gestures in a tile-based user interface
US9250780B2 (en) Information processing method and electronic device
US8397153B1 (en) Systems and methods for rich presentation overlays
TW201337713A (zh) 電子裝置及其操作方法以及電腦可讀取儲存媒體
WO2014161347A1 (en) Method and device for relocating input box to target position in mobile terminal browser, and storage medium
TW201435713A (zh) 在修改期間保留內容區域之佈局
WO2022242379A1 (zh) 笔画渲染方法、装置、存储介质以及终端
TW201409340A (zh) 圖形移動控制系統及方法
AU2018251560B2 (en) Live ink presence for real-time collaboration
US20150067469A1 (en) Electronic apparatus and method for display control
US11714531B2 (en) Glyph-aware text selection
CN110286971B (zh) 处理方法及系统、介质和计算设备
WO2016160745A1 (en) Touch application programming interfaces
CN110007831B (zh) 一种翻页控制方法、装置及终端设备
CA2868991A1 (en) Associating content with a graphical interface window using a fling gesture
US20140365955A1 (en) Window reshaping by selective edge revisions
US20150070399A1 (en) Managing Partially Out-of-Frame View Areas
Tair The importance of responsive logo design across a wide range of devices on the web
CN114629800A (zh) 工控网络靶场的可视化生成方法、装置、终端及存储介质

Legal Events

Date Code Title Description
A621 Written request for application examination

Free format text: JAPANESE INTERMEDIATE CODE: A621

Effective date: 20231129