图片处理方法及装置制造方法及图纸

本说明书提供图片处理方法及装置，其中所述图片处理方法包括：接收图片处理请求，所述图片处理请求中携带有待处理图片；在图片处理区域显示所述待处理图片，并确定所述待处理图片在所述图片处理区域的临界距离；响应于针对所述待处理图片的处理操作，确定所述处理操作的类型，在所述处理操作的类型满足预设处理条件时，确定所述待处理图片的移动距离；基于所述待处理图片的移动距离与所述临界距离的关联关系，在所述图片处理区域处理所述待处理图片。

【技术实现步骤摘要】
图片处理方法及装置
本说明书涉及计算机
，特别涉及一种图片处理方法。本说明书同时涉及一种图片处理装置，一种计算设备，以及一种计算机可读存储介质。
技术介绍
随着计算机领域的不断发展，网页游戏是一种新兴起的游戏形式，以游戏简单、操作方便、无需安装等优势逐渐被用户所喜爱。其中，在网页端的绘图游戏中，需要对图片进行移动以及缩放，然而在HTML5(HyperTextMarkupLanguage，超文本标记语言)的画布元素中却没有图片查看功能，不能够在基于HTML5的画布元素制作的各种程序内对图片进行图片处理(例如移动和缩放)，使得用户对待处理图片的处理效率较差，也为用户带来的较差的游戏体验。
技术实现思路
有鉴于此，本说明书实施例提供了一种图片处理方法。本说明书同时涉及一种图片处理装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中存在的基于HTML5的画布元素制作的各种程序内不能对图片进行移动和缩放的问题。根据本说明书实施例的第一方面，提供了一种图片处理方法，包括：接收图片处理请求，所述图片处理请求中携带有待处理图片；在图片处理区域显示所述待处理图片，并确定所述待处理图片在所述图片处理区域的临界距离；响应于针对所述待处理图片的处理操作，确定所述处理操作的类型，在所述处理操作的类型满足预设处理条件时，确定所述待处理图片的移动距离；基于所述待处理图片的移动距离与所述临界距离的关联关系，在所述图片处理区域处理所述待处理图片。根据本说明书实施例的第二方面，提供了一种图片处理装置，包括：接收模块，被配置为接收图片处理请求，所述图片处理请求中携带有待处理图片；第一确定模块，被配置为在图片处理区域显示所述待处理图片，并确定所述待处理图片在所述图片处理区域的临界距离；第二确定模块，被配置为响应于针对所述待处理图片的处理操作，确定所述处理操作的类型，在所述处理操作的类型满足预设处理条件时，确定所述待处理图片的移动距离；处理模块，被配置为基于所述待处理图片的移动距离与所述临界距离的关联关系，在所述图片处理区域处理所述待处理图片。根据本说明书实施例的第三方面，提供了一种计算设备，包括：存储器和处理器；所述存储器用于存储计算机可执行指令，所述处理器用于执行所述计算机可执行指令，其中，所述处理器执行所述计算机可执行指令时实现所述图片处理方法的步骤。根据本说明书实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机可执行指令，该指令被处理器执行时实现所述图片处理方法的步骤。本说明书提供的图片处理方法，接收图片处理请求，所述图片处理请求中携带有待处理图片；在图片处理区域显示所述待处理图片，并确定所述待处理图片在所述图片处理区域的临界距离；响应于针对所述待处理图片的处理操作，确定所述处理操作的类型，在所述处理操作的类型满足预设处理条件时，确定所述待处理图片的移动距离；基于所述待处理图片的移动距离与所述临界距离的关联关系，在所述图片处理区域处理所述待处理图片。本说明书一实施例，通过将待处理图片放置在图片处理区域，并确定图片处理区域的临界距离，实现对待处理图片进行处理，在确定用户对待处理图片的处理操作满足预设处理条件的情况下，计算待处理图片的结束处理位置以及图片处理区域的目标处理位置之间的移动距离，并通过确定待处理图片与临界距离的关系，移动待处理图片，进而处理待处理图片，该方法通过设置临界距离对待处理图片进行限制，以避免待处理图片不能在图片处理区域中展示，造成待处理图片丢失或者隐藏，进而无法对待处理图片进行下一步处理，不仅实现了基于网页端画布在指定区域内对待处理图片查看，以方便用户对待处理图片的处理，也进而提高对待处理图片的处理效率，提供用户的使用体验。附图说明图1是本说明书一实施例提供的一种图片处理方法应用于图片上色游戏的场景示意图；图2是本说明书一实施例提供的一种图片处理方法的流程图；图3是本说明书一实施例提供的一种图片处理方法的计算待处理图片的移动距离示意图；图4是本说明书一实施例提供的一种图片处理方法的处理流程图；图5是本说明书一实施例提供的一种图片处理装置的结构示意图；图6是本说明书一实施例提供的一种计算设备的结构框图。具体实施方式在下面的描述中阐述了很多具体细节以便于充分理解本说明书。但是本说明书能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本说明书内涵的情况下做类似推广，因此本说明书不受下面公开的具体实施的限制。在本说明书一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本说明书一个或多个实施例。在本说明书一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本说明书一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。应当理解，尽管在本说明书一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本说明书一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。首先，对本说明书一个或多个实施例涉及的名词术语进行解释。HTML5：(HyperTextMarkupLanguage，超文本标记语言)第五次最新的修订版本。Canvas(画布)：是HTML5中新增的一个重要元素，专门用来绘制图像，在网页上放置一个Canvas元素，就相当于在网页上放置一块“画布”，可以在其中进行图像的描绘。阻尼移动效果：指界面滑动到了最底部或最顶部仍可以比实际的内容多滑动一段距离然后回弹的弹性效果。在本说明书中，提供了一种图片处理方法，本说明书同时涉及一种图片处理装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。在图片处理
中，图片移动以及缩放在各种图片画图工具中都存在，比如在计算机设备端或者在制图软件等图片处理软件中，都会有对图片进行移动或者缩放的功能，然而在HTML5的画布元素中确没有图片查看功能，不能够在基于HTML5的画布中制作各种程序对图片进行移动或缩放查看，本说明书实施例提供的图片处理方法，可以实现在画布中的指定区域内，实现对图片的单指移动和多指缩放的功能，同时设置图片移动临界距离，在图片边框与指定区域边框之间的距离超过临界距离的情况下，即可产生图片回弹效果，使图片回弹至指定位置，以实现对图片的进一步处理。参见图1，图1示出了根据本申请一实施例提供的一种图片处理方法应用于图片上色游戏的场景示意图。图1中的A区域为基于HTML5的整个Canvas画本文档来自技高网...

【技术保护点】
1.一种图片处理方法，其特征在于，包括：/n接收图片处理请求，所述图片处理请求中携带有待处理图片；/n在图片处理区域显示所述待处理图片，并确定所述待处理图片在所述图片处理区域的临界距离；/n响应于针对所述待处理图片的处理操作，确定所述处理操作的类型，在所述处理操作的类型满足预设处理条件时，确定所述待处理图片的移动距离；/n基于所述待处理图片的移动距离与所述临界距离的关联关系，在所述图片处理区域处理所述待处理图片。/n

【技术特征摘要】
1.一种图片处理方法，其特征在于，包括：
接收图片处理请求，所述图片处理请求中携带有待处理图片；
在图片处理区域显示所述待处理图片，并确定所述待处理图片在所述图片处理区域的临界距离；
响应于针对所述待处理图片的处理操作，确定所述处理操作的类型，在所述处理操作的类型满足预设处理条件时，确定所述待处理图片的移动距离；
基于所述待处理图片的移动距离与所述临界距离的关联关系，在所述图片处理区域处理所述待处理图片。


2.根据权利要求1所述的图片处理方法，其特征在于，所述确定所述待处理图片的移动距离，包括：
获取所述待处理图片的结束位置坐标、所述图片处理区域的目标位置坐标、所述待处理图片的长度以及所述待处理图片的宽度；
基于所述结束位置坐标、所述图片处理区域的目标位置坐标、所述待处理图片的长度以及所述待处理图片的宽度，通过预设算法计算所述待处理图片的移动距离。


3.根据权利要求1或2所述的图片处理方法，其特征在于，所述基于所述待处理图片的移动距离与所述临界距离的关联关系，在所述图片处理区域处理所述待处理图片，包括：
基于所述待处理图片的移动距离与第一临界距离的关联关系，在所述图片处理区域处理所述待处理图片；或者
基于所述待处理图片的移动距离与第二临界距离的关联关系，在所述图片处理区域处理所述待处理图片，其中，所述第二临界距离基于所述第一临界距离确定的。


4.根据权利要求3所述的图片处理方法，其特征在于，所述基于所述待处理图片的移动距离与第一临界距离的关联关系，在所述图片处理区域处理所述待处理图片，包括：
在所述待处理图片的移动距离小于等于所述第一临界距离的情况下，根据所述第一临界距离按照预设算法，计算获得所述待处理图片的回弹处理位置；
基于所述回弹处理位置移动所述待处理图片，并基于所述回弹处理位置在所述图片处理区域确定第一待处理区域，且在所述第一待处理区域处理所述待处理图片。


5.根据权利要求1所述的图片处理方法，其特征在于，所述在所述处理操作的类型满足预设处理条件时之后，还包括：
确定所述用户针对所述待处理图片在所述图片处理区域的开始触控点坐标和结束触控点坐标；
基于所述开始触控点坐标和所述结束触控点坐标计算所述用户在所述待处理图片的操作距离。


6.根据权利要求3所述的图片处理方法，其特征在于，所述基于所述待处理图片的移动距离与所述临界距离的关联关系，在所述图片处理区域处理所述待处理图片，包括：
在所述待处理图片的移动距离大于所述第一临界距离，且小于等于所述第二临界距离的情况下，基于所述用户在所述待处理图片的操作距离和所述预设移动系数计算所述待处理图片的实际移动距离；
基于所述待处理图片的实际移动距离移动所述待处理图片，并基于所述待处理图片的实际移动距离在所述图片处理区域确定第二待处理区域，且在所述第二待处理区域处理所述待处图片。


7.根据...

【专利技术属性】
技术研发人员：侯效雷，
申请(专利权)人：上海哔哩哔哩科技有限公司，
类型：发明
国别省市：上海;31