CN111275614A - 一种实现图像无损缩放的方法 - Google Patents

一种实现图像无损缩放的方法 Download PDF

Info

Publication number
CN111275614A
CN111275614A CN201811471828.XA CN201811471828A CN111275614A CN 111275614 A CN111275614 A CN 111275614A CN 201811471828 A CN201811471828 A CN 201811471828A CN 111275614 A CN111275614 A CN 111275614A
Authority
CN
China
Prior art keywords
point
scaling
image
coordinates
calculating
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
CN201811471828.XA
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.)
Suzhou Tianhong Jiahui Software Co Ltd
Original Assignee
Suzhou Tianhong Jiahui Software 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 Suzhou Tianhong Jiahui Software Co Ltd filed Critical Suzhou Tianhong Jiahui Software Co Ltd
Priority to CN201811471828.XA priority Critical patent/CN111275614A/zh
Publication of CN111275614A publication Critical patent/CN111275614A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction 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/04845—Interaction 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction 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/0488—Interaction 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/80—Creating or modifying a manually drawn or painted image using a manual input device, e.g. mouse, light pen, direction keys on keyboard
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/041—Indexing scheme relating to G06F3/041 - G06F3/045
    • G06F2203/04104—Multi-touch detection in digitiser, i.e. details about the simultaneous detection of a plurality of touching locations, e.g. multiple fingers or pen and finger

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明涉及一种实现图像无损缩放的方法，包括如下步骤：1计算第一点和第二点之间的距离，记为L1；2计算所述第三点和所述第四点之间的距离，记录长度L2；3根据长度L1和长度L2计算出缩放因子；4通过缩放因子依次对图形对象的坐标值、线段宽度值进行缩放计算，并重新绘制图像。本发明通过缩放图形方法可以直观显示不同大小的图形，仿真模拟真实世界，通过缩放图形方法在一个屏幕范围内查看海量图形内容。

Description

一种实现图像无损缩放的方法
技术领域
本发明涉及计算机绘图领域，具体涉及一种基于SVG实现海量图形数据模拟宏观微观世界直观展示的操作方法。
背景技术
随着计算机技术的发展进入移动设备领域，人机交互的要求越来越高。通过丰富的图形能够直观地、准确地将当前信息呈现在用户眼前，比如图形的绘制显示，一般采用Canvas画板加载jpg,png,gif等非线性像素图形实现解码显示。
随着移动设备越来越多地被使用，屏幕的多点触控为图形的直观显示提供了基础，传统的图形方法通过数据输出压缩图片后会丢失精度，无法改变大小，只能很小范围内缩放图形，无法精确增加或移除单个元素，无法高保真显示图形。
发明内容
本发明的目的在于设计一种实现图像无损缩放的方法，通过极致缩放图形方法可以直观显示不同大小的图形，仿真模拟显示宏观细节和微观结构，通过显示过滤节点在一个手持端屏幕范围内流畅快速地查看海量图形内容。
为实现上述目的，本发明提供如下技术方案：一种实现图像无损缩放的方法，包括如下步骤：
1.通过两手指在设备触控屏幕中任选两点，并获取第一点的坐标和第二点的坐标，通过坐标计算第一点和第二点之间的距离，记为L1；
2.通过手指进行屏幕的放大缩小，当移动事件发生时，重新获取此时两手指所处的第三点的坐标和第四点的坐标，计算所述第三点和所述第四点之间的距离，记录长度L2；
3.根据长度L1和长度L2计算出缩放因子；
4.通过缩放因子依次对图形对象的坐标值、线段宽度值进行缩放计算，并重新绘制图像。
进一步的，还包括步骤5，步骤5为过滤显示图像。
进一步的，所述触控屏幕中有预先绘制好的图形对象，且所述图像为SVG格式。
进一步的，所述设备为智能手机或平板电脑或触屏电脑。
通过数据过滤器对SVG单元在显示精度范围内的数据转换为系统图形对象，提交Canvas刷新屏幕显示，极大地提高了屏幕显示速度，降低图形资源占用率。
进一步的，所述步骤1和2中，计算两点之间的距离的代码如下：
Math.sqrt(Math.pow(Math.abs(x2-x1),2)+Math.pow(Math.abs(y2-y1),2))。
进一步的，所述缩放因子通过L2/L1计算得到。
其中获取设备屏幕宽度W，高度H；并且在设备竖屏状态下，最大显示数值为H，在设备横屏状态下，最大显示数值为W。上述两种状态状态下，最小显示数值为0.5个像素。当SVG图形长度和宽度属性在显示数值范围内则输出显示，否则过滤不输出。
与现有技术相比，本发明具有以下有益效果：本发明通过极致缩放图形方法可以直观显示不同大小的图形，仿真模拟显示宏观细节和微观结构，通过显示过滤节点在一个手持端屏幕范围内流畅快速地查看海量图形内容。
附图说明
图1为所述方法的流程图；
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
如图1所示，操作者缩放动作开始后，系统根据屏幕多点触控获取第一点的坐标和第二点的坐标，并计算出缩放因子；
基于SVG，通过缩放因子依次对SVG图形对象的坐标值、线段宽度值进行缩放计算。计算后的图形大小和缩放因子大小有关，目前基于移动设备64位系统数值范围精度可达2的64次方到2的-64次方。
通过数据过滤器对SVG单元在显示精度范围内的数据转换为系统图形对象，提交Canvas刷新屏幕显示，极大地提高了屏幕显示速度，降低图形资源占用率。
进一步所述根据第一点的坐标和第二点的坐标，计算所述第一点和所述第二点之间的距离，包括：按下式计算所述距离L：
(x1,y1)、(x2,y2)分别为所述第一点和所述第二点的坐标。
计算两点距离的代码如下：
Math.sqrt(Math.pow(Math.abs(x2-x1),2)+Math.pow(Math.abs(y2-y1),2))；
显示过滤器显示数值范围计算如下：
获取屏幕宽度W，高度H，在移动设备竖屏状态下，最大显示数值为H，在移动设备横屏状态下，最大显示数值为W。上述两种状态下，最小显示数值为0.5个像素。当SVG图形width属性在显示数值范围内则输出显示，否则过滤不输出。
如果坐标值是否大于或者小于临界值则忽略该坐标节点，不予显示，如果该坐标值在临界值范围内，则显示。
包含IO数据处理模块、节点过滤模块和图形绘制模块。
IO数据处理模块包括SVG读取解析模块与SVG写入模块，这两个模块均根据上次用户保存数据进行读取和写入。
显示过滤器显示数值范围计算如下：
获取屏幕宽度W，高度H，在移动设备竖屏状态下，最大显示数值为H，在移动设备横屏状态下，最大显示数值为W。上述两种状态下，最小显示数值为0.5个像素。当SVG图形width属性在显示数值范围内则输出显示，否则过滤不输出。
图形绘制模块包括SVG转Canvas转换模块和图像显示模块。显示模块通过数据节点过滤模块对SVG单元在显示精度范围内的数据转换为系统图形对象，提交Canvas刷新屏幕显示，极大地提高了屏幕显示速度，降低图形资源占用率。
缩放处理模块根据操作者缩放动作开始后，系统根据屏幕多点触控获取第一点的坐标和第二点的坐标，并计算出缩放因子；基于SVG，通过缩放因子依次对SVG图形对象的坐标值、线段宽度值进行缩放计算。计算后的图形大小和缩放因子大小有关，目前基于移动设备64位系统数值范围精度可达2的64次方到2的-64次方。
节点过滤模块进一步所述根据第一点的坐标和第二点的坐标，计算所述第一点和所述第二点之间的距离，包括：按下式计算所述距离L：
(x1,y1)、(x2,y2)分别为所述第一点和所述第二点的坐标。
计算两点距离的代码如下：
Math.sqrt(Math.pow(Math.abs(x2-x1),2)+Math.pow(Math.abs(y2-y1),2))。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (5)

1.一种实现图像无损缩放的方法，其特征在于，包括如下步骤：
(1).通过两手指在设备触控屏幕中任选两点，并获取第一点的坐标和第二点的坐标，通过坐标计算第一点和第二点之间的距离，记为L1；
(2).通过手指进行屏幕的放大缩小，当移动事件发生时，重新获取此时两手指所处的第三点的坐标和第四点的坐标，计算所述第三点和所述第四点之间的距离，记录长度L2；
(3).根据长度L1和长度L2计算出缩放因子；
(4).通过缩放因子依次对图形对象的坐标值、线段宽度值进行缩放计算，并重新绘制图像。
2.根据权利要求1所述的一种实现图像无损缩放的方法，其特征在于：还包括步骤(5)，具体为(5).过滤显示图像。
3.根据权利要求1所述的一种实现图像无损缩放的方法，其特征在于：所述触控屏幕中有预先绘制好的图形对象，且所述图像为SVG格式。
4.根据权利要求1所述的一种实现图像无损缩放的方法，其特征在于：所述设备为智能手机或平板电脑或触屏电脑。
5.根据权利要求1所述的一种实现图像无损缩放的方法，其特征在于：所述缩放因子通过L2/L1计算得到。
CN201811471828.XA 2018-12-04 2018-12-04 一种实现图像无损缩放的方法 Pending CN111275614A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811471828.XA CN111275614A (zh) 2018-12-04 2018-12-04 一种实现图像无损缩放的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811471828.XA CN111275614A (zh) 2018-12-04 2018-12-04 一种实现图像无损缩放的方法

Publications (1)

Publication Number Publication Date
CN111275614A true CN111275614A (zh) 2020-06-12

Family

ID=71002847

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811471828.XA Pending CN111275614A (zh) 2018-12-04 2018-12-04 一种实现图像无损缩放的方法

Country Status (1)

Country Link
CN (1) CN111275614A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112269957A (zh) * 2020-11-11 2021-01-26 北京联创信安科技股份有限公司 图片处理方法、装置、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103838429A (zh) * 2014-02-14 2014-06-04 安徽科大讯飞信息科技股份有限公司 触摸屏上毛笔效果的绘制方法及系统
CN104680421A (zh) * 2013-11-26 2015-06-03 浙江大华系统工程有限公司 一种可伸缩矢量图形svg显示方法及装置
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
CN108803995A (zh) * 2018-06-14 2018-11-13 曙光信息产业(北京)有限公司 基于svg的图表数据展示系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104680421A (zh) * 2013-11-26 2015-06-03 浙江大华系统工程有限公司 一种可伸缩矢量图形svg显示方法及装置
CN103838429A (zh) * 2014-02-14 2014-06-04 安徽科大讯飞信息科技股份有限公司 触摸屏上毛笔效果的绘制方法及系统
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
CN108803995A (zh) * 2018-06-14 2018-11-13 曙光信息产业(北京)有限公司 基于svg的图表数据展示系统

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112269957A (zh) * 2020-11-11 2021-01-26 北京联创信安科技股份有限公司 图片处理方法、装置、设备及存储介质

Similar Documents

Publication Publication Date Title
CN111104962B (zh) 图像的语义分割方法、装置、电子设备及可读存储介质
CN111240669B (zh) 界面生成方法、装置、电子设备及计算机存储介质
CA3028863C (en) Projection image construction method and device
CN114648615B (zh) 目标对象交互式重现的控制方法、装置、设备及存储介质
CN110796664A (zh) 图像处理方法、装置、电子设备及计算机可读存储介质
CN107861711B (zh) 页面适配方法及装置
CN112101252B (zh) 一种基于深度学习的图像处理方法、系统、设备及介质
CN111381790A (zh) 操控方法、装置、系统、电子白板及移动端
CN107038199B (zh) 一种绘图方法和装置
CN109743566A (zh) 一种用于识别vr视频格式的方法与设备
CN112200189A (zh) 基于SPP-YOLOv3的车型识别方法、装置及计算机可读存储介质
CN106776994B (zh) 一种工程符号在工程报表和网页中的应用方法及系统
CN115988170A (zh) 云会议中实时视频合屏中英文字符清晰显示的方法与装置
CN104571904A (zh) 一种信息处理方法及电子设备
CN111275614A (zh) 一种实现图像无损缩放的方法
CN115129278A (zh) 图像显示控制方法、系统、可读存储介质及电子设备
CN115908116A (zh) 一种图像处理方法、装置、设备及存储介质
CN111143018A (zh) 一种前端图像渲染方法、装置和电子设备
EP2838272A1 (en) Television cursor moving method and device
CN109064537A (zh) 基于3d渲染引擎的图像生成方法以及装置
CN115375812A (zh) Cad数据渲染方法、装置、电子设备及存储介质
CN112199615A (zh) 基于WebGL技术的网页端大量二维文字绘画方法
CN114549303A (zh) 图像显示、处理方法、装置、设备和存储介质
CN114972558A (zh) 书写笔迹绘制方法、装置、介质以及交互平板
CN113038184A (zh) 数据处理方法、装置、设备及存储介质

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20200612

RJ01 Rejection of invention patent application after publication