CN113448473A - 图片裁剪区域可视化操作方法及装置 - Google Patents
图片裁剪区域可视化操作方法及装置 Download PDFInfo
- Publication number
- CN113448473A CN113448473A CN202110700581.XA CN202110700581A CN113448473A CN 113448473 A CN113448473 A CN 113448473A CN 202110700581 A CN202110700581 A CN 202110700581A CN 113448473 A CN113448473 A CN 113448473A
- Authority
- CN
- China
- Prior art keywords
- area
- information
- cutting
- point
- region
- 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.)
- Granted
Links
- 238000005520 cutting process Methods 0.000 title claims abstract description 87
- 238000000034 method Methods 0.000 title claims abstract description 44
- 230000000007 visual effect Effects 0.000 title claims abstract description 8
- 238000009825 accumulation Methods 0.000 claims description 23
- 238000004590 computer program Methods 0.000 claims description 18
- 238000003860 storage Methods 0.000 claims description 9
- 238000012545 processing Methods 0.000 abstract description 5
- 230000006870 function Effects 0.000 description 12
- 238000010586 diagram Methods 0.000 description 10
- 238000012800 visualization Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 230000004044 response Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000001514 detection method Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000003825 pressing Methods 0.000 description 2
- 238000013461 design Methods 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 238000009966 trimming Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/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
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
- G06F16/54—Browsing; Visualisation therefor
-
- 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
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)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请适用于图片处理技术领域,具体公开了一种图片裁剪区域可视化操作方法及装置,在该方法中,确定初始图片中的可裁剪区域;获取针对所述可裁剪区域的第一触点点击信息,以确定相应的裁剪起点位置;检测触点移动信息,并根据所述触点移动信息和所述裁剪起点位置绘制具有预设形状格式的裁剪区域;组合所述裁剪区域和所述可裁剪区域,并对所述裁剪区域和所述可裁剪区域的重叠图形突出显示。由此,通过对组合图形中重叠区域突出显示,可以让用户实时、可视化地查看图片中的裁剪区域信息。
Description
技术领域
本申请属图片处理技术领域,尤其涉及一种图片裁剪区域可视化操作方法及装置。
背景技术
在图片处理软件中,裁剪工具是目前最常用的功能之一。然而,在现有的裁剪工具中,操作人员只能大概知道裁剪区域信息,而无法准确详细的了解裁剪区域信息,为操作人员执行裁剪操作带来了困扰和不便。具体地,在目前的图片裁剪工具中,无法实时显示当前裁剪区域,导致操作人员在进行裁剪参数输入时,只知道裁剪的大致区域,无法对裁剪区域进行准确的了解,从而在裁剪时,导致裁剪缺少了操作人员想要的图片细节区域,或者多余了操作人员不想要的图片细节区域。
因此,如何将裁剪区域信息进行可视化是目前业界亟待解决的难题。
发明内容
鉴于此,本申请实施例提供了一种图片裁剪区域可视化操作方法及装置,用以至少解决目前相关技术中无法可视化地展示图片中的裁剪区域信息的问题。
本申请实施例的第一方面提供了一种图片裁剪区域可视化操作方法,包括:确定初始图片中的可裁剪区域;获取针对所述可裁剪区域的第一触点点击信息,以确定相应的裁剪起点位置;检测触点移动信息,并根据所述触点移动信息和所述裁剪起点位置绘制具有预设形状格式的裁剪区域;组合所述裁剪区域和所述可裁剪区域,并对所述裁剪区域和所述可裁剪区域的重叠图形突出显示。
本申请实施例的第二方面提供一种图片裁剪区域可视化操作装置,包括:可裁剪区域确定单元,被配置为确定初始图片中的可裁剪区域;裁剪起点确定单元,被配置为获取针对所述可裁剪区域的第一触点点击信息,以确定相应的裁剪起点位置;裁剪区域绘制单元,被配置为检测触点移动信息,并根据所述触点移动信息和所述裁剪起点位置绘制具有预设形状格式的裁剪区域;图形组合单元,被配置为组合所述裁剪区域和所述可裁剪区域,并对所述裁剪区域和所述可裁剪区域的重叠图形突出显示。
本申请实施例的第三方面提供了一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行时实现如上述方法的步骤。
本申请实施例的第四方面提供了一种计算机程序产品,当计算机程序产品在电子设备上运行时,使得电子设备实现如上述方法的步骤。
本申请实施例与现有技术相比存在的有益效果是:
通过本申请实施例,在用户对可裁剪区域进行点击时可以确定裁剪起点位置,并在检测到触点移动信息时绘制裁剪区域,组合裁剪区域和可裁剪区域,并且对裁剪区域与可裁剪区域之间的重合部分突出显示。由此,通过对重叠区域突出显示,可以让用户实时、可视化地查看图片中的裁剪区域信息。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1示出了根据本申请实施例的图片裁剪区域可视化操作方法的一示例的流程图;
图2示出了根据本申请实施例的在所述裁剪区域中绘制图形参考尺度线的一示例的流程图;
图3示出了根据本申请实施例的在矩形的裁剪区域中绘制图形参考尺度线的一示例的流程图;
图4示出了根据本申请实施例的根据各个第一参考点和相应的第二参考点绘制图形参考尺度线的一示例的流程图;
图5示出了根据本申请实施例的图片裁剪区域可视化操作方法的一示例的流程图;
图6示出了根据本申请实施例的实施裁剪框制作阶段的一示例的流程图;
图7示出了根据本申请实施例的实施裁剪框斜线添加阶段的一示例的流程图;
图8示出了根据本申请实施例的图片裁剪区域可视化操作装置的一示例的结构框图;
图9是本申请实施例的电子设备的一示例的示意图。
具体实施方式
以下描述中,为了说明而不是为了限定,提出了诸如特定系统结构、技术之类的具体细节,以便透彻理解本申请实施例。然而,本领域的技术人员应当清楚,在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中,省略对众所周知的系统、装置、电路以及方法的详细说明,以免不必要的细节妨碍本申请的描述。
为了说明本申请所述的技术方案,下面通过具体实施例来进行说明。
应当理解,当在本说明书和所附权利要求书中使用时,术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在,但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
还应当理解,在此本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本申请。如在本申请说明书和所附权利要求书中所使用的那样,除非上下文清楚地指明其它情况,否则单数形式的“一”、“一个”及“该”意在包括复数形式。
还应当进一步理解,在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合,并且包括这些组合。
如在本说明书和所附权利要求书中所使用的那样,术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地,短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。
具体实现中,本申请实施例中描述的电子设备包括但不限于诸如具有触摸敏感表面(例如,触摸屏显示器和/或触摸板)的移动电话、膝上型计算机或平板计算机之类的其它便携式设备。还应当理解的是,在某些实施例中,上述设备并非便携式通信设备,而是具有触摸敏感表面(例如,触摸屏显示器)的计算机。
在接下来的讨论中,描述了包括显示器和触摸敏感表面的电子设备。然而,应当理解的是,电子设备可以包括诸如物理键盘、鼠标和/或控制杆的一个或多个其它物理用户接口设备。
可以在电子设备上执行的各种应用程序可以使用诸如触摸敏感表面的至少一个公共物理用户接口设备。可以在应用程序之间和/或相应应用程序内调整和/或改变触摸敏感表面的一个或多个功能以及终端上显示的相应信息。这样,终端的公共物理架构(例如,触摸敏感表面)可以支持具有对用户而言直观且透明的用户界面的各种应用程序。
需说明的是,在现有的图片裁剪过程中,操作人员只能大概知道裁剪区域信息,而无法准确详细的了解裁剪区域信息,为操作人员执行裁剪操作带来了困扰和不便。因此,将裁剪区域信息进行可视化显得非常重要。
鉴于此,图1示出了根据本申请实施例的图片裁剪区域可视化操作方法的一示例的流程图,旨在通过绘制裁剪框,向操作人员反馈当前的裁剪信息,方便操作人员准确、快速、实时执行裁剪操作。关于本申请实施例方法的执行主体,其可以是各种类型的终端设备,例如电脑或手机,等等。
如图1所示,在步骤110中,确定初始图片中的可裁剪区域。在本申请实施例的一个示例中,可裁剪区域可以默认为初始图片中的所有像素区域。在本申请实施例的另一示例中,可裁剪区域可以是初始图片中允许被裁剪的区域,例如图片中的仅部分预设定的区域是可裁剪的。
在步骤120中,获取针对可裁剪区域的第一触点点击信息,以确定相应的裁剪起点位置。示例性地,当用户对终端设备中所显示的可裁剪区域进行点击时,可以生成相应的触点点击信息,并将点击位置来作为裁剪起点位置。
在一些实施方式中,可以检测是否存在针对可裁剪区域的鼠标点击操作,当存在时,可以根据鼠标点击操作生成第一触点点击信息。由此,终端设备可以检测鼠标点击操作而生成相应的触点点击信息,依据鼠标光标来确定相应的触点,可以高效、精确地确定裁剪起点位置。
在步骤130中,检测触点移动信息,并根据触点移动信息和裁剪起点位置绘制具有预设形状格式的裁剪区域。这里,裁剪区域所对应的形状格式可以是根据用户需求而进行设定的,例如可以采用矩形或圆形等。示例性地,当用户拖动触点时,终端设备可以根据所移动的触点绘制具有固定长宽比例的矩形,并且矩形的尺寸大小可以随着触点移动位置的改变而相应调整。
在步骤140中,组合裁剪区域和可裁剪区域,并对裁剪区域和可裁剪区域的重叠图形突出显示。
需说明的是,由于裁剪起始位置是在可裁剪区域上的,所以裁剪区域与可裁剪区域之间势必会存在交集图形,使得图片中待裁剪的图形部分能被突出显示。
在一些实施方式中,终端设备可以是默认被配置成针对不同图形的重叠部分进行高亮显示,例如在WPF(Windows Presentation Foundation,用户界面框架)的组合功能有个特征,就是组合的图形区域如果重叠的图形个数为偶数个,该重叠区域就会透明,否则就会显示整个组合图形的填充色。
为了保障裁剪信息的显示更加精简,可以仅显示当前剪切操作所对应的剪切区域,而可以忽略历史剪切操作所对应的裁剪区域。具体地,在上述步骤140之后,终端设备还可以检测是否存在针对可裁剪区域的第二触点点击信息,而当存在第二触点点击信息时,删除裁剪区域,并确定与第二触点点击信息相应的裁剪起点位置。由此,使得每进行一次图片剪切操作,在操作界面上都只能看到一个裁剪框。
在一些应用场景下,在绘制裁剪区域时,还可以在裁剪区域中绘制至少一个参考尺度线。由此,可以为操作人员裁剪图片时提供尺寸参考。
图2示出了根据本申请实施例的在所述裁剪区域中绘制图形参考尺度线的一示例的流程图。
如图2所示,在步骤210中,从裁剪区域中提取对应区域特征点。需说明的是,区域特征点可以是初始图片中对应特定格式或标准的特征点,例如矩形的左上边角点,或者圆形的圆心,等等。
在步骤220中,根据区域特征点的位置和预设的参考尺度距离,在裁剪区域中绘制至少一个参考尺度线。示例性地,可以在裁剪区域图形中绘制等距离的网格线,从而为用户提供尺度参考价值。
图3示出了根据本申请实施例的在矩形的裁剪区域中绘制图形参考尺度线的一示例的流程图。
如图3所示,在步骤310中,以区域特征点的位置为参照点,按照预设的梯度尺度在裁剪区域的宽度方向和高度方向上分别进行距离梯度累加,从而得到多组在宽度方向上的第一参考点和相应的在高度方向上的第二参考点。这里,区域特征点可以是矩形的某个顶点,以此作为参照物来提取在宽度和高度上的等距离参考点。
在步骤320中,根据各个第一参考点和相应的第二参考点,绘制相应的图形参考尺度线。
通过本申请实施例,以区域特征点作为出发点,等间距地在矩形的宽度方向和高度方向上选取参考点并构建参考尺度线,可以实现较高的尺度参考意义。
需说明的是,当矩形的宽度和高度之间之间不等时,等间距划分的参考尺度线可能无法完全适用,例如较短边上相应的参考点可能超过了较短边的范围。
鉴于此,图4示出了根据本申请实施例的根据各个第一参考点和相应的第二参考点绘制图形参考尺度线的一示例的流程图。
如图4所示,在步骤410中,获取裁剪区域的宽度信息和高度信息。
示例性地,可以通过用户输入信息来确定裁剪区域的宽度信息和高度信息,此外,还可以是通过调用测量工具所确定的宽度信息和高度信息。
在步骤420中,判断梯度累加值是否大于宽度信息或高度信息。
具体地,当梯度累加值大于宽度信息或高度信息时,则可以说明对应方向上的参考点的位置可能已经超出了矩形的范围。
在步骤431中,当梯度累加值小于宽度信息且梯度累加值小于高度信息时,根据各个第一参考点和相应的第二参考点,绘制相应的图形参考尺度线。
这样,在等距划分的参考点位于矩形的长度范围内时,可以利用等距的参考点绘制参考尺度线。
在步骤433中,当梯度累加值大于宽度信息且梯度累加值小于高度信息时,根据宽度信息和在高度方向上的梯度累加值与宽度信息的差值确定第三参考点,并根据各个第二参考点和相应的第三参考点绘制图形参考尺度线。
示例性地,根据宽度信息确定第三参考点的横坐标,并根据在高度方向上的梯度累加值与宽度信息的差值确定第三参考点的纵坐标。
在步骤435中,当梯度累加值大于高度信息且梯度累加值小于宽度信息时,根据高度信息和在宽度方向上的梯度累加值与高度信息的差值确定第四参考点,并根据各个第一参考点和相应的第四参考点绘制图形参考尺度线。示例性地,根据高度信息确定第四参考点的纵坐标,并且根据在宽度方向上的梯度累加值与高度信息的差值确定第四参考点的横坐标。
通过本申请实施例,在参考尺度超过矩形的某个边的长度范围时,可以采用上述方式来重新确定参考点绘制参考尺度线,保障裁剪区域能被参考尺度线所覆盖。
在本申请实施例的一些示例中,可以借助WPF中的相关工具来实现图片裁剪区域可视化操作方法的功能。具体地,基于WPF的绘制几何图形、画刷使用、路径和组合,通过鼠标点击、移动、松开事件或者裁剪参数的输入,绘制矩形显示当前可执行裁剪操作区域,并按当前显示图片在可执行裁剪操作区域尺寸比列实时绘制裁剪框,以在当前显示图片的相对位置显示裁剪区域的大小和位置,向操作人员反馈当前的裁剪信息,方便操作人员准确、快速、实时执行裁剪操作。
图5示出了根据本申请实施例的图片裁剪区域可视化操作方法的一示例的流程图。
如图5所示,图片裁剪区域可视化操作方法500包括裁剪框制作阶段510、裁剪框斜线添加阶段520和裁剪框拖动阶段530。通过裁剪框制作阶段510,用户可以在操作界面手动绘制裁剪框。通过裁剪框斜线添加阶段520,用户可以为裁剪框添加斜线。通过裁剪框拖动阶段530,用户可以将裁剪框进行拖动。
图6示出了根据本申请实施例的实施裁剪框制作阶段的一示例的流程图。
如图6所示,在步骤610中,检测鼠标左键点击事件的触发,传递并记录鼠标坐标p。
这里,可以是针对可裁剪区域的检测操作,例如按WPF绘制几何图形中绘制矩形的方法,以矩形左上角顶点X和Y轴坐标、矩形宽度、矩形高度为参数,绘制两个重合大矩形以显示可裁剪区域。
在步骤620中,检测鼠标移动点击事件的触发,传递并记录鼠标坐标p1。
在步骤630中,复位绘制数据的绘制起点为(0,0),宽240,高190的固定矩形。
然后,通过步骤640、步骤660、步骤680和步骤6100来检测鼠标的移动方向。相应地,在步骤650、步骤670、步骤690和步骤6110中以(p1.x,p1.y)为起点,宽p.x-p1.x,高p.y-p1.y,绘制裁剪框。
在步骤6120中,绘制起点为(0,0),宽240,高190的固定矩形。
在步骤6130中,组合绘制的三个矩形,路径添加组合,用界面canvas容器添加路径。
通过上述步骤实现在两个重合大矩形中绘制一个小矩形显示裁剪区域。然后通过组合方式组合这三个矩形。由于WPF组合功能有个特征,就是组合的图形区域如果重叠的图形个数为偶数个,该重叠区域就会透明,否则就会显示整个组合图形的填充色。接着用路径添加组合,此时可在路径中设置整个组合图形的笔画大小、笔画颜色、填充色,而画刷则用于为填充色使用半透明灰色,这样使得小矩形内部颜色半透明。最后,用操作界面的元素添加路径,实现裁剪框和裁剪区域的可视化。
在步骤6140中,触发鼠标松开事件,停止绘制裁剪框。
通过本申请实施例,为界面后台添加鼠标左键按下事件、鼠标移动事件、鼠标松开事件。将鼠标左键按下事件、鼠标移动事件、鼠标松开事件的当前鼠标位置坐标作为参数,计算得到小矩形的绘制起点、宽度和高度,传递给绘制矩形的方法,得到裁剪框。另外,显示可裁剪区域的两个大矩形的尺寸则设为固定大小。此时,点下鼠标左键并拖动鼠标,在操作界面会出现很多的裁剪框。在一些优选实施方式中,在每一次点下鼠标左键并拖动鼠标之前,还可以将上一次绘制的裁剪框删除,使得每一次拖动鼠标,在操作界面都只能看到一个裁剪框。
图7示出了根据本申请实施例的实施裁剪框斜线添加阶段的一示例的流程图。
如图7所示,在步骤710中,定义尺度所对应的梯度累加量i,并且i的初始值为0,梯度尺度为6。这样,利用for循环按距离i在裁剪框内绘制直线,直到填满所绘制的裁剪框为止,具体地,i取值范围从0开始,且小于等于width+height,并且每次绘制一条直线,i的值自加6(即,i=i+6)。
在步骤720中,检测矩形的高度信息(height)是否小于或等于宽度信息(width)。通过比较裁剪框宽width和高height,得到较小者。
在步骤730中,检测梯度累加量是否小于矩形的高度信息(height)与宽度信息(width)之和。
在步骤740中,检测梯度累加量是否小于或等于矩形的高度信息。
在步骤750中,在梯度累加量小于或等于高度信息时,以(pt.x+i,pt.y)为起点,(pt.x,pt.y+i)为中点,绘制直线。这里,(x,y)为参考起点的坐标,可以选用裁剪框左上角。
在步骤760中,检测梯度累加量是否小于或等于矩形的宽度信息。
在步骤770中,在梯度累加量小于或等于宽度信息时,以(pt.x+i,pt.y)为起点,(pt.x+i-height,pt.y+height)为终点,绘制直线。
在步骤780中,在梯度累加量大于宽度信息时,以(pt.x+width,pt.y+i-width)为起点,(pt.x+i-height,pt.y+height)为终点,绘制直线。
综上,当较小值为height时,如果i小于height,绘制的直线两端点坐标为(x+i,y)、(x,y+i),否则i小于width,绘制的直线两端点坐标为(x+i,y)、(x+i-height,y+height),否则i小于width+height,绘制的直线两端点坐标为(x+width,y+i-width)、(x+i-height,y+height)。
在步骤790中,检测梯度累加量是否小于或等于高度信息与宽度信息的和值。
在步骤7100中,检测梯度累加量是否小于或等于高度信息。
在步骤7110中,检测梯度累加值是否小于或等于高度信息。
在步骤7120中,当梯度累加量小于或等于宽度信息时,以(pt.x+i,pt.y)为起点,(pt.x,pt.y+i)为终点,绘制直线。
在步骤7130中,当梯度累加量小于或等于高度信息时,以(pt.x+width,pt.y+i-width)为起点,(pt.x,pt.y+i)为终点,绘制直线。
在步骤7140中,当梯度累加量大于高度信息时,以(pt.x+width,pt.y+i-width)为起点,(pt.x+i-height,pt.y+height)为终点,绘制直线。
综上,当较小值为width时,如果i小于width,绘制的直线两端点坐标为(x+i,y)、(x,y+i),否则i小于height,绘制的直线两端点坐标为(x+width,y+i-width)、(x,y+i),否则i小于width+height,绘制的直线两端点坐标为(x+width,y+i-width)、(x+i-height,y+height)。
进一步地,在裁剪框拖动阶段530中,当松开鼠标左键绘制完裁剪框时,记录当前裁剪框信息,结束当前绘制状态,进入裁剪框可拖动状态。依据记录的裁剪框信息,判断当前鼠标位置(在裁剪框内还是在裁剪框外),决定鼠标光标形状(在裁剪框内为四向调整光标,在裁剪框外为箭头光标)。当鼠标光标为四向调整光标时,点击鼠标左键并拖动鼠标,此时,先清除上次绘制的裁剪框,再结合鼠标事件传递的鼠标位置和记录的裁剪框信息重新绘制裁剪框,实现鼠标拖动裁剪框,并修改裁剪框信息的效果。
在本申请实施例中,通过鼠标点击、拖拽或者裁剪参数的输入,绘制矩形显示当前可执行裁剪操作区域,并按当前显示图片在可执行裁剪操作区域尺寸比列实时绘制裁剪框,绘制完成后可进行拖动裁剪框操作,以在当前显示图片的相对位置显示裁剪区域的大小和位置,向操作人员反馈当前的裁剪信息,方便操作人员准确、快速、实时执行裁剪操作,提高工作效率。
图8示出了根据本申请实施例的图片裁剪区域可视化操作装置的一示例的结构框图。
如图8所示,图片裁剪区域可视化操作装置800包括可裁剪区域确定单元810、裁剪起点确定单元820、裁剪区域绘制单元830和图形组合单元840。
可裁剪区域确定单元810被配置为确定初始图片中的可裁剪区域。
裁剪起点确定单元820被配置为获取针对所述可裁剪区域的第一触点点击信息,以确定相应的裁剪起点位置。
裁剪区域绘制单元830被配置为检测触点移动信息,并根据所述触点移动信息和所述裁剪起点位置绘制具有预设形状格式的裁剪区域。
图形组合单元840被配置为组合所述裁剪区域和所述可裁剪区域,并对所述裁剪区域和所述可裁剪区域的重叠图形突出显示。
需要说明的是,上述装置/单元之间的信息交互、执行过程等内容,由于与本申请方法实施例基于同一构思,其具体功能及带来的技术效果,具体可参见方法实施例部分,此处不再赘述。
图9是本申请实施例的电子设备的一示例的示意图。如图9所示,该实施例的电子设备900包括:处理器910、存储器920以及存储在所述存储器920中并可在所述处理器910上运行的计算机程序930。所述处理器910执行所述计算机程序930时实现上述图片裁剪区域可视化操作方法实施例中的步骤,例如图1所示的步骤110至140。或者,所述处理器910执行所述计算机程序930时实现上述各装置实施例中各模块/单元的功能,例如图8所示单元810至840的功能。
示例性的,所述计算机程序930可以被分割成一个或多个模块/单元,所述一个或者多个模块/单元被存储在所述存储器920中,并由所述处理器910执行,以完成本申请。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段,该指令段用于描述所述计算机程序930在所述电子设备900中的执行过程。例如,所述计算机程序930可以被分割成可裁剪区域确定程序模块、裁剪起点确定程序模块、裁剪区域绘制程序模块和图形组合程序模块,各程序模块具体功能如下:
可裁剪区域确定程序模块被配置为确定初始图片中的可裁剪区域;
裁剪起点确定程序模块被配置为获取针对所述可裁剪区域的第一触点点击信息,以确定相应的裁剪起点位置;
裁剪区域绘制程序模块被配置为检测触点移动信息,并根据所述触点移动信息和所述裁剪起点位置绘制具有预设形状格式的裁剪区域;
图形组合程序模块被配置为组合所述裁剪区域和所述可裁剪区域,并对所述裁剪区域和所述可裁剪区域的重叠图形突出显示。
所述电子设备900可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述电子设备可包括,但不仅限于,处理器910、存储器920。本领域技术人员可以理解,图9仅是电子设备900的示例,并不构成对电子设备900的限定,可以包括比图示更多或少的部件,或组合某些部件,或不同的部件,例如所述电子设备还可以包括输入输出设备、网络接入设备、总线等。
所称处理器910可以是中央处理单元(Central Processing Unit,CPU),还可以是其他通用处理器、数字信号处理器(Digital Signal Processor,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
所述存储器920可以是所述电子设备900的内部存储单元,例如电子设备900的硬盘或内存。所述存储器920也可以是所述电子设备900的外部存储设备,例如所述电子设备900上配备的插接式硬盘,智能存储卡(Smart Media Card,SMC),安全数字(SecureDigital,SD)卡,闪存卡(Flash Card)等。进一步地,所述存储器920还可以既包括所述电子设备900的内部存储单元也包括外部存储设备。所述存储器920用于存储所述计算机程序以及所述电子设备所需的其他程序和数据。所述存储器920还可以用于暂时地存储已经输出或者将要输出的数据。
所属领域的技术人员可以清楚地了解到,为了描述的方便和简洁,仅以上述各功能单元、模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能单元、模块完成,即将所述装置的内部结构划分成不同的功能单元或模块,以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中,上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。另外,各功能单元、模块的具体名称也只是为了便于相互区分,并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程,可以参考前述方法实施例中的对应过程。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述或记载的部分,可以参见其它实施例的相关描述。
本领域普通技术人员可以意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本申请的范围。
在本申请所提供的实施例中,应该理解到,所揭露的装置/电子设备和方法,可以通过其它的方式实现。例如,以上所描述的装置/电子设备实施例仅仅是示意性的,例如,所述模块或单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口,装置或单元的间接耦合或通讯连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述单元既可以采用硬件的形式实现,也可以采用软件的形式实现。
所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请实现上述实施例方法中的全部或部分流程,也可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一计算机可读存储介质中,该计算机程序在被处理器执行时,可实现上述各个方法实施例的步骤。其中,所述计算机程序包括计算机程序代码,所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括:能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是,所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减,例如在某些司法管辖区,根据立法和专利实践,计算机可读介质不包括电载波信号和电信信号。
以上所述实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围,均应包含在本申请的保护范围之内。
Claims (10)
1.一种图片裁剪区域可视化操作方法,其特征在于,包括:
确定初始图片中的可裁剪区域;
获取针对所述可裁剪区域的第一触点点击信息,以确定相应的裁剪起点位置;
检测触点移动信息,并根据所述触点移动信息和所述裁剪起点位置绘制具有预设形状格式的裁剪区域;
组合所述裁剪区域和所述可裁剪区域,并对所述裁剪区域和所述可裁剪区域的重叠图形突出显示。
2.如权利要求1所述的方法,其特征在于,在组合所述裁剪区域和所述可裁剪区域之后,所述方法还包括:
检测是否存在针对所述可裁剪区域的第二触点点击信息;
当存在所述第二触点点击信息时,删除所述裁剪区域,并确定与所述第二触点点击信息相应的裁剪起点位置。
3.如权利要求1所述的方法,其特征在于,所述根据所述触点移动信息和所述裁剪起点位置绘制具有预设形状格式的裁剪区域,包括:
在所述裁剪区域中绘制至少一个参考尺度线。
4.如权利要求3所述的方法,其特征在于,所述在所述裁剪区域中绘制图形参考尺度线,包括:
从所述裁剪区域中提取对应区域特征点;
根据所述区域特征点的位置和预设的参考尺度距离,在所述裁剪区域中绘制至少一个参考尺度线。
5.如权利要求4所述的方法,其特征在于,所述裁剪区域为矩形,
其中,所述根据所述区域特征点的位置和预设的参考尺度距离,在所述裁剪区域中绘制至少一个图形参考尺度线,包括:
以所述区域特征点的位置为参照点,按照预设的梯度尺度在所述裁剪区域的宽度方向和高度方向上分别进行距离梯度累加,从而得到多组在所述宽度方向上的第一参考点和相应的在所述高度方向上的第二参考点;
根据各个所述第一参考点和相应的所述第二参考点,绘制相应的图形参考尺度线。
6.如权利要求5所述的方法,其特征在于,所述根据各个所述第一参考点和相应的所述第二参考点,绘制相应的图形参考尺度线,包括:
获取所述裁剪区域的宽度信息和高度信息;
将所述梯度累加值与所述宽度信息和所述高度信息分别进行对比;
当所述梯度累加值小于所述宽度信息且所述梯度累加值小于所述高度信息时,根据各个所述第一参考点和相应的所述第二参考点,绘制相应的图形参考尺度线;
当所述梯度累加值大于所述宽度信息且所述梯度累加值小于所述高度信息时,根据在宽度方向上的所述宽度信息确定第三参考点,并根据在高度方向上的所述梯度累加值与所述宽度信息的差值确定第四参考点,根据各个所述第三参考点和相应的所述第四参考点绘制图形参考尺度线;
当所述梯度累加值大于所述高度信息且所述梯度累加值小于所述宽度信息时,根据所述高度信息和在宽度方向上的所述梯度累加值与所述高度信息的差值确定第四参考点,并根据各个所述第一参考点和相应的所述第四参考点绘制图形参考尺度线。
7.如权利要求1所述的方法,其特征在于,所述获取针对所述可裁剪区域的第一触点点击信息,包括:
检测是否存在针对所述可裁剪区域的鼠标点击操作;
当存在时,根据所述鼠标点击操作生成第一触点点击信息。
8.一种图片裁剪区域可视化操作装置,其特征在于,包括:
可裁剪区域确定单元,被配置为确定初始图片中的可裁剪区域;
裁剪起点确定单元,被配置为获取针对所述可裁剪区域的第一触点点击信息,以确定相应的裁剪起点位置;
裁剪区域绘制单元,被配置为检测触点移动信息,并根据所述触点移动信息和所述裁剪起点位置绘制具有预设形状格式的裁剪区域;
图形组合单元,被配置为组合所述裁剪区域和所述可裁剪区域,并对所述裁剪区域和所述可裁剪区域的重叠图形突出显示。
9.一种电子设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现如权利要求1-7中任一项所述方法的步骤。
10.一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110700581.XA CN113448473B (zh) | 2021-06-23 | 2021-06-23 | 图片裁剪区域可视化操作方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110700581.XA CN113448473B (zh) | 2021-06-23 | 2021-06-23 | 图片裁剪区域可视化操作方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113448473A true CN113448473A (zh) | 2021-09-28 |
CN113448473B CN113448473B (zh) | 2023-10-27 |
Family
ID=77812371
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110700581.XA Active CN113448473B (zh) | 2021-06-23 | 2021-06-23 | 图片裁剪区域可视化操作方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113448473B (zh) |
Citations (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20030113035A1 (en) * | 2001-12-19 | 2003-06-19 | Eastman Kodak Company | Method and system for compositing images to produce a cropped image |
US20080084429A1 (en) * | 2006-10-04 | 2008-04-10 | Sherman Locke Wissinger | High performance image rendering for internet browser |
CN102043586A (zh) * | 2010-12-21 | 2011-05-04 | 无锡永中软件有限公司 | 电子表格中的背景色显示方法和装置 |
CN104932827A (zh) * | 2015-06-29 | 2015-09-23 | 北京金山安全软件有限公司 | 一种图片裁剪方法、装置及终端 |
CN110568982A (zh) * | 2019-09-12 | 2019-12-13 | 北京字节跳动网络技术有限公司 | 在线演示文稿中的图片裁剪方法、装置、存储介质及设备 |
CN111369575A (zh) * | 2020-05-26 | 2020-07-03 | 北京小米移动软件有限公司 | 截屏方法及装置、存储介质 |
CN111524170A (zh) * | 2020-04-13 | 2020-08-11 | 中南大学 | 一种基于无监督深度学习的肺部ct图像配准方法 |
CN111768416A (zh) * | 2020-06-19 | 2020-10-13 | Oppo广东移动通信有限公司 | 照片裁剪方法及装置 |
CN111784695A (zh) * | 2020-06-01 | 2020-10-16 | 北京像素软件科技股份有限公司 | 图形的裁剪方法、装置、电子设备及存储介质 |
CN112233205A (zh) * | 2020-10-14 | 2021-01-15 | 山东省工程地震研究中心 | 基于离散数据进行分区和裁剪的电子地图制图方法及系统 |
CN112348832A (zh) * | 2020-11-05 | 2021-02-09 | Oppo广东移动通信有限公司 | 图片处理方法、装置、电子设备及存储介质 |
-
2021
- 2021-06-23 CN CN202110700581.XA patent/CN113448473B/zh active Active
Patent Citations (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20030113035A1 (en) * | 2001-12-19 | 2003-06-19 | Eastman Kodak Company | Method and system for compositing images to produce a cropped image |
US20080084429A1 (en) * | 2006-10-04 | 2008-04-10 | Sherman Locke Wissinger | High performance image rendering for internet browser |
CN102043586A (zh) * | 2010-12-21 | 2011-05-04 | 无锡永中软件有限公司 | 电子表格中的背景色显示方法和装置 |
CN104932827A (zh) * | 2015-06-29 | 2015-09-23 | 北京金山安全软件有限公司 | 一种图片裁剪方法、装置及终端 |
CN110568982A (zh) * | 2019-09-12 | 2019-12-13 | 北京字节跳动网络技术有限公司 | 在线演示文稿中的图片裁剪方法、装置、存储介质及设备 |
CN111524170A (zh) * | 2020-04-13 | 2020-08-11 | 中南大学 | 一种基于无监督深度学习的肺部ct图像配准方法 |
CN111369575A (zh) * | 2020-05-26 | 2020-07-03 | 北京小米移动软件有限公司 | 截屏方法及装置、存储介质 |
CN111784695A (zh) * | 2020-06-01 | 2020-10-16 | 北京像素软件科技股份有限公司 | 图形的裁剪方法、装置、电子设备及存储介质 |
CN111768416A (zh) * | 2020-06-19 | 2020-10-13 | Oppo广东移动通信有限公司 | 照片裁剪方法及装置 |
CN112233205A (zh) * | 2020-10-14 | 2021-01-15 | 山东省工程地震研究中心 | 基于离散数据进行分区和裁剪的电子地图制图方法及系统 |
CN112348832A (zh) * | 2020-11-05 | 2021-02-09 | Oppo广东移动通信有限公司 | 图片处理方法、装置、电子设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN113448473B (zh) | 2023-10-27 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US7197718B1 (en) | Interactive virtual area browser for selecting and rescaling graphical representations of displayed data | |
US11106339B2 (en) | Designing and resizing graphical user interfaces | |
US10162498B2 (en) | Providing selection areas for selectable objects in graphical interface | |
US8769444B2 (en) | Multi-input gesture control for a display screen | |
EP2748738B1 (en) | Method of creating a snap point in a computer-aided design system | |
EP1975883A2 (en) | Techniques for displaying a collection of hierarchical elements | |
CN108553894B (zh) | 显示控制方法及装置、电子设备、存储介质 | |
CN113536173B (zh) | 一种页面处理方法、装置、电子设备及可读存储介质 | |
US20160063674A1 (en) | Graph display apparatus, graph display method and storage medium | |
JP2017504877A (ja) | フローティングタッチに基づくクリックオブジェクト拡大のための方法および装置 | |
US20080270936A1 (en) | Electronic device display adjustment interface | |
JP2000099260A (ja) | はみ出しトラッキング機能を有するデジタイザ装置,デジタイザタブレット使用方法 | |
US20150169134A1 (en) | Methods circuits apparatuses systems and associated computer executable code for providing projection based human machine interfaces | |
CN111190677A (zh) | 信息显示方法、信息显示装置及终端设备 | |
CN109873980B (zh) | 视频监控方法、装置及终端设备 | |
CN112417340B (zh) | 网页图片处理方法、计算机设备和存储介质 | |
CN111367455B (zh) | 一种触控屏人机交互精确定位和测量方法 | |
CN113448473A (zh) | 图片裁剪区域可视化操作方法及装置 | |
EP4064013A1 (en) | Information processing system, program, and information processing method | |
CN111198674B (zh) | 一种软件架构的可视化方法及装置 | |
CN115794980A (zh) | 一种数据展示方法、设备、装置及介质 | |
CN112667931B (zh) | 网页收藏方法、电子设备和存储介质 | |
US20140365955A1 (en) | Window reshaping by selective edge revisions | |
CN112116719B (zh) | 三维场景中对象的确定方法、装置、存储介质和电子设备 | |
CN112558844B (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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |