用于重新着色矢量图形的系统和方法与流程

1.本公开涉及用于重新着色矢量图形的系统和方法。


背景技术：

2.存在用于创建和发布设计或其他视觉内容的各种计算机实现的工具。许多这样的工具使用矢量图形。
3.一旦矢量图形被创建或添加到设计中，用户将经常想要重新着色该图形。
4.在一些情况下，重新着色是相对简单的任务。例如，考虑一个简单的矩形线条图。在这种情况下，重新着色可能只涉及将单个现有线条颜色(例如黑色)更改为单个新线条颜色(例如红色)。
5.然而，在许多情况下，重新着色要复杂得多——例如重新着色具有数百(或甚至更多)颜色的图形。
6.本说明书中描述的背景信息是发明人已知的背景信息。将此信息作为背景信息的引用并不是承认或暗示此背景信息是现有技术或者是本领域普通技术人员的公知常识。


技术实现要素：

7.本文描述的是一种用于重新着色矢量图形的计算机实现的方法，该方法包括：由处理单元对所述矢量图形进行处理以确定文件颜色集合，该文件颜色集合中的每个文件颜色为由所述矢量图形定义的颜色；处理所述矢量图形以确定由所述矢量图形定义的多个主色；通过将文件颜色集合中的每个文件颜色与文件颜色组相关联，生成文件颜色组集合，每个文件颜色组与由所述矢量图形定义的主色相关联；经由输入设备接收定义特定文件颜色组和新颜色的颜色变化输入数据；以及响应于接收到所述颜色变化输入数据：确定描述变化到所述新颜色的颜色变换；对于与所述特定文件颜色组相关联的每个文件颜色，使用所述颜色变换计算相应的变换后文件颜色；通过将与所述特定文件颜色组相关联的每个文件颜色替换为其相应的变换后文件颜色来重新着色所述矢量图形；以及在显示器上显示经重新着色的矢量图形。
8.本文还描述了一种计算机处理系统，包括：处理单元；输入设备；显示器；以及存储指令的非瞬时计算机可读存储介质，当由所述处理单元执行时，所述指令使所述处理单元：处理矢量图形以确定文件颜色集合，该文件颜色集合中的每个文件颜色为由该矢量图形定义的颜色；处理所述矢量图形以确定由所述矢量图形定义的多个主色；通过将文件颜色集合中的每个文件颜色与文件颜色组相关联，生成文件颜色组集合，每个文件颜色组与由矢量图形定义的主色相关联；通过所述输入设备接收定义特定文件颜色组和新颜色的颜色变化输入数据；以及响应于接收到所述颜色变化输入数据：确定描述变化到所述新颜色的颜色变换；对于与所述特定文件颜色组相关联的每个文件颜色，使用颜色变换计算相应的变换后文件颜色；通过将与所述特定文件颜色组相关联的每个文件颜色替换为其相应的变换后文件颜色来重新着色所述矢量图形；以及在所述显示器上显示经重新着色的矢量图形。
附图说明
9.在附图中：
10.图1是图示其中可以实现本公开的特征的示例环境的框图。
11.图2是可配置为执行本文所述的各种特征的示例计算机处理系统。
12.图3提供了示例用户界面。
13.图4描绘了矢量图形设计元素的组件。
14.图5是描绘在矢量图形重新着色过程中涉及的操作的流程图。
15.图6是描绘提取矢量图形文件颜色所涉及的操作的流程图。
16.图7是描绘确定矢量图形中的主色所涉及的操作的流程图。
17.图8是描绘调整矢量图形的颜色所涉及的操作的流程图。
18.图9提供了对矢量图形重新着色的视觉描绘。
19.虽然所要求保护的本发明可进行各种修改和替代形式，但具体实施例在附图中以示例的方式示出并被详细描述。然而，应当理解，附图和详细描述并不旨在将本发明限制为所公开的特定形式。意图是覆盖落入由所附权利要求限定的本发明的精神和范围内的所有修改、等同和替代。
具体实施方式
20.在以下描述中，阐述了许多具体细节以提供对要求保护的发明的透彻理解。然而，很明显，可以在没有这些具体细节的情况下实践要求保护的发明。在某些情况下，众所周知的结构和设备以框图形式显示以避免不必要的模糊。
21.如上所述，许多用于创建和发布视觉内容的工具利用矢量图形格式的图像(简称矢量图形)。本公开提供用于重新着色矢量图形的系统和方法。
22.矢量图形格式的一个示例是万维网联盟(world wide web consortium)开发的可缩放矢量图形(svg)格式。为了说明本公开的技术和操作，参考svg格式提供示例。然而，本公开的特征可以与替代矢量图形格式(例如eps、pdf、ai或其他矢量图形格式)和/或栅格图像(通过访问与其相关联的颜色表)一起使用(或适用于一起使用)。本公开的特征还可以与多个图像一起使用(或适用于一起使用)——例如跨越构成品牌标识或以其他方式相关的图像语料库。
23.首先，将描述可以实现本公开的特征的联网环境和计算机处理系统。在此之后，描述了用于创建具有一个或多个矢量图形的设计并重新着色此类矢量图形的用户界面的一个示例。然后描述为给定矢量图形重新着色而执行的处理。
24.举例来说，图1描绘了可以在其中执行本文描述的各种操作和技术的联网环境100。
25.联网环境100包括通过通信网络120(例如因特网)互连的服务器系统102和客户端系统110。虽然图示和描述了单个客户端系统110，但是服务器系统102通常将服务于多个客户端系统。
26.服务器系统102包括一起操作以提供服务器端功能的各种功能组件。
27.服务器系统102的一个组件是前端服务器应用程序104。服务器应用程序104由计算机处理系统执行以配置服务器系统102以向一个或多个相应的客户端应用程序(例如客
户端应用程序112，如下所述)提供服务器端功能。服务器端功能包括诸如用户账户管理、登录和内容创建功能——例如创建、保存、发布、共享内容等操作。
28.为了提供服务器端功能，服务器应用程序104包括一个或多个应用程序、库、api或其他软件元素。例如，在客户端应用程序112是网络浏览器的情况下，服务器应用程序104将是诸如apache、iis、nginx、gws之类的网络服务器或替代的网络服务器。在客户端应用程序112是特定应用程序的情况下，服务器应用程序104将是被专门配置为与该客户端应用程序112交互的应用程序服务器。服务器系统102可以具有网络服务器和应用程序服务器模块两者。
29.在本示例中，服务器系统102还包括数据存储106，其用于存储服务器系统102在其操作过程中所需的各种数据。这样的数据可以包括例如用户账户数据、设计模板数据、设计元素数据和关于用户已经创建的设计的数据。尽管描绘了一个数据存储106，但是服务器系统102可以包括/利用多个单独的数据存储——例如，用户数据存储器(存储用户账户详细信息)；一个或多个设计元素库数据存储器(存储设计元素，例如用户可以添加到正在创建的设计中的图形)；模板数据存储器(存储用户可用于创建设计的模板)；设计数据存储器(存储有关已创建设计的数据)；以及/或其他数据存储器。
30.为了向客户端提供服务器端功能性，服务器系统102通常将包括对图示和描述的那些的附加功能性组件。作为一个示例，服务器系统102通常将包括一个或多个防火墙(和/或其他网络安全组件)和负载平衡器(用于管理对服务器应用程序104的访问)。
31.服务器系统102组件已经被描述为功能组件，并且可以通过硬件、软件(存储在内存中并由一个或多个计算机处理系统执行的数据和计算机可读指令)和/或硬件和软件的组合来实现。
32.服务器系统102的精确硬件架构将根据实现方式而变化，然而可以很好地包括多个计算机处理系统(例如服务器计算机)，它们直接或经由一个或多个网络(例如，一个或多个lan、wan或其他网络(如果需要，具有安全逻辑覆盖，例如vpn))相互通信。
33.例如，服务器应用程序104可以在单个专用服务器计算机上运行，并且数据存储106可以在单独的服务器计算机上运行(具有对适当数据存储资源的访问权)。作为替代示例，服务器系统102可以是云计算系统并且被配置为基于用户需求104来启用/停用资源。在这种情况下，可能有多个服务器计算机(节点)运行多个服务器应用程序104，这些服务器应用程序104通过负载平衡器为客户端提供服务。
34.在示例环境100中已经示出了单个服务器系统102。在某些实施例中，附加的服务器系统可以被客户端系统110(和/或服务器系统102)访问——例如客户端和服务器系统可以访问以获取诸如矢量图形之类的内容项的第三方内容服务器。
35.客户端系统110托管客户端应用程序112，该客户端应用程序112在由客户端系统110执行时配置客户端系统110以提供用于服务器系统102的服务器应用程序104的客户端功能/与服务器系统102的服务器应用程序104交互。经由客户端应用程序112，用户可以与服务器应用程序104交互以执行各种操作，例如创建、编辑、保存、检索/访问、发布和共享设计。
36.客户端应用程序112可以是网络浏览器应用程序(例如chrome、safari、internet explorer、opera或替代网络浏览器应用程序)，其经由适当的统一资源定位符(url)访问服
务器应用程序104并通过通用万维网协议(例如http、https、ftp)与服务器应用程序104通信。或者，客户端应用程序112可以是被编程为使用定义的应用程序编程接口(api)调用与服务器应用程序104通信的特定应用程序。
37.在本示例中，客户端系统110还包括矢量图形重新着色组件114(简称rc 114)。在下面描述的实施例中，矢量图形重新着色组件114执行(或配置客户端应用程序112以执行)与矢量图形重新着色相关联的处理。
38.rc 114可以是软件模块，例如与客户端应用程序112结合操作以扩展其功能的附加组件或插件。在替代实施例中，由rc 114提供的功能可以由客户端应用程序112本地提供(即客户端应用程序112本身具有指令和数据，当被执行时，这些指令和数据使客户端应用程序112执行部分或全部此处描述的矢量图形重新着色功能)。在另外的替代实施例中，rc 114可以是与客户端应用程序112通信的独立应用程序。
39.作为具体示例，rc 114的功能可以由运行在网络浏览器客户端应用程序112上的javascript提供。
40.客户端系统110可以是由硬件和/或软件配置(或可配置)以提供客户端侧功能的任何计算机处理系统。举例来说，客户端系统110可以是台式计算机、膝上型计算机、上网本计算机、平板计算设备、移动/智能电话设备、个人数字助理或替代的计算机处理系统。
41.虽然图1未示出，客户端系统110通常将具有安装在其上的附加应用程序，例如至少一个操作系统应用程序，例如microsoft windows操作系统、apple macos操作系统、apple ios操作系统、android操作系统、unix或linux操作系统或替代操作系统。
42.以上描述和在图1中图解说明的架构仅作为示例提供。许多变化是可能的。
43.例如，虽然rc 114已经被描述和图示为客户端系统110的一部分/安装在客户端系统110处，但是rc 114提供的功能可以替代地由服务器系统102提供(例如作为服务器应用程序104的附加或扩展、与服务器应用程序104通信的单独的、独立的应用程序，或服务器应用程序104的本机部分)。
44.进一步备选地，由rc 114提供的功能可以由结合操作的客户端应用程序(例如112)和服务器应用程序(例如104)来执行。
45.作为又一替代方案，rc 114可以作为完全独立的服务来提供——例如，运行在与服务器系统102分开的服务器系统上并根据需要与客户端应用程序112(和/或服务器系统102)通信以执行这里描述的矢量重新着色功能。
46.此外，虽然已经描述了客户端-服务器架构，但是可以在独立的应用程序中提供包括rc 114(或以其他方式配置为执行矢量重新着色)的内容创建系统，该应用程序仅在客户端系统上安装和运行而无需任何服务器应用程序。
47.本文描述的特征和技术是使用一个或多个计算机处理系统来实现的。
48.例如，在上述联网环境100中，客户端系统110是计算机处理系统(例如个人计算机、平板电脑/电话设备或其他计算机处理系统)。类似地，服务器系统102的各种功能组件是使用一个或多个计算机处理系统(例如服务器计算机或其他计算机处理系统)来实现的。
49.图2提供了可配置以实现本文描述的实施例和/或特征的计算机处理系统200的框图。系统200是通用计算机处理系统。可以理解的是，图2并未图示计算机处理系统的所有功能或物理组件。例如，没有描述电源或电源接口，但是系统200将携带电源或被配置为连接
到电源(或两者)。还将理解，特定类型的计算机处理系统将确定适当的硬件和架构，并且适合于实现本公开的特征的替代计算机处理系统可以具有比所描绘的那些额外的、替代的或更少的组件。
50.计算机处理系统200包括至少一个处理单元202。处理单元202可以是单个计算机处理设备(例如中央处理单元、图形处理单元或其他计算设备)，或者可以包括多个计算机处理设备。在某些情况下，在计算机处理系统200被描述为执行操作或功能的情况下，执行该操作或功能所需的所有处理将由处理单元202执行。在其他情况下，执行该操作或功能所需的处理也可以是由系统200(以共享或专用方式)可访问和使用的远程处理设备执行。
51.通过通信总线204，处理单元202与一个或多个机器可读存储(存储器)设备进行数据通信，这些设备存储用于控制处理系统200的操作的指令和/或数据。在该示例中，系统200包括系统存储器206(例如bios)、易失性存储器208(例如随机存取存储器，例如一个或多个dram模块)和非易失性存储器210(例如一个或多个硬盘或固态驱动器)。
52.系统200还包括一个或多个接口，总体由212指示，系统200经由这些接口与各种设备和/或网络接口。一般而言，其他设备可以与系统200集成在一起，或者可以是分开的。在设备与系统200分离的情况下，设备和系统200之间的连接可以通过有线或无线硬件和通信协议，并且可以是直接或间接(例如联网)连接。
53.与其他设备/网络的有线连接可以通过任何适当的标准或专有硬件和连接协议进行。例如，系统200可以被配置为通过以下一项或多项与其他设备/通信网络进行有线连接：usb；火线；esata；雷电接口；以太网；os/2；平行；串行；hdmi；dvi；vga；scsi；音频端口。其他有线连接也是可能的。
54.与其他设备/网络的无线连接可以类似地通过任何适当的标准或专有硬件和通信协议进行。例如，系统200可以被配置为使用以下一种或多种方式与其他设备/通信网络进行无线连接：红外；蓝牙；wi-fi；近场通信(nfc)；全球移动通信系统(gsm)、增强型数据gsm环境(edge)、长期演进(lte)、宽带码分多址(w-cdma)、码分多址(cdma)。其他无线连接也是可能的。
55.一般而言，并且取决于所讨论的特定系统，系统200通过有线或无线方式连接到的设备包括一个或多个输入设备以允许数据输入到系统200中/由系统200接收以供处理单元202处理，并且包括一个或多个输出设备以允许系统200输出数据。在本示例中，输入/输出设备通过一个或多个输入/输出设备接口214与系统200接口。示例设备描述如下，然而，应当理解，并非所有计算机处理系统都将包括所有提到的设备，并且可以很好地使用所提到的那些设备的附加和替代设备。
56.例如，系统200可以包括或连接到一个或多个输入设备，通过这些输入设备将信息/数据输入系统200(由系统200接收)。这样的输入设备可以包括键盘、鼠标、触控板、麦克风、加速度计、接近传感器、gps设备等。系统200还可包括或连接到由系统200控制以输出信息的一个或多个输出设备。这样的输出设备可以包括诸如crt显示器、lcd显示器、led显示器、等离子显示器、触摸屏显示器、扬声器、振动模块、led/其他灯等的设备。系统200还可以包括或连接到可以充当输入和输出设备的设备，例如系统200可以从其中读取数据和/或向其中写入数据的存储设备(硬盘驱动器、固态驱动器、磁盘驱动器、紧凑型闪存卡、sd卡等)，以及既可以显示(输出)数据又可以接收触摸信号(输入)的触摸屏显示器。
57.作为示例，在系统200是客户端系统(例如客户端系统110)的情况下，它可以包括显示器218(可以是触摸屏显示器)、相机设备220、麦克风设备222(可以是与相机设备集成)、定点设备224(例如鼠标、触控板或其他定点设备)、键盘226和扬声器设备228。
58.系统200还包括一个或多个通信接口216，用于与网络通信，该网络例如环境100的网络120(和/或服务器系统102或os 120内的本地网络)。经由通信接口216，系统200可以将数据传送到联网设备并从联网设备接收数据，联网设备本身可以是其他计算机处理系统。
59.系统200可以是任何合适的计算机处理系统，例如服务器计算机系统、台式计算机、膝上型计算机、上网本计算机、平板计算设备、移动/智能电话、个人数字助理，或替代的计算机处理系统。
60.系统200存储或可访问计算机应用程序(也称为软件或程序)——即计算机可读指令和数据，当由处理单元202执行时，其配置系统200以接收、处理和输出数据。指令和数据可以存储在系统200可访问的非瞬时机器可读介质上。例如，指令和数据可以存储在非瞬时存储器210上。指令和数据可以在通过诸如214或216之类的接口通过有线或无线网络连接启用(举例说明)的传输通道中经由数据信号发送到系统200/由系统200接收。
61.系统200可访问的应用程序通常包括操作系统应用程序，例如microsoft windows、apple macos、apple ios、android、unix或linux。
62.系统200还存储或访问应用程序，当由处理单元202执行时，该应用程序配置系统200以执行本文所述的各种计算机实现的处理操作。例如，并且参考上述图1的网络环境：客户端系统110包括客户端应用程序112，其配置客户端系统110以执行这里描述的操作。
63.在一些情况下，部分或全部给定的计算机实现的方法将由系统200本身执行，而在其他情况下，处理可由与系统200进行数据通信的其他设备执行。
64.如上所述，本公开一般涉及重新着色矢量图形。参考图3，将描述示例用户界面300，用户可以通过该示例用户界面300来创建设计、向该设计添加设计元素(例如矢量图形)以及重新着色设计元素。然而，应当注意，创建设计和/或将矢量图形添加到设计的特定方式与本公开没有特定的相关性，并且存在许多这样做的替代方式。
65.在本示例中，用户界面300由客户端系统102显示，例如显示在显示器218上，客户端系统102被客户端应用程序104配置为这样做。
66.经由界面300，用户可以创建包括一个或多个页面的设计文档并且(尤其)向页面添加设计元素。示例设计创建界面300包括其中显示当前正在处理的设计的设计创建窗格302。在本示例中，设计创建窗格302显示设计文档的单个页面304。
67.设计创建界面300还包括设计元素搜索和选择窗格310，通过该窗格用户可以搜索或浏览一个或多个设计元素库、查看设计元素预览314以及选择要包括在设计文档中的设计元素。为此，窗格310包括搜索框312(在这种情况下允许用户输入搜索文本)和提供设计元素的预览图像的设计元素预览314。搜索功能可以使客户端应用程序112在客户端系统110的本地存储器中搜索设计元素，在服务器系统120的存储器中搜索设计元素，和/或在第三方服务器系统(未示出)中搜索设计元素。
68.在搜索和选择窗格310中预览的设计元素可以包括矢量图形设计元素，并且可以被添加到正在处理的设计中(例如到页面304)，例如通过拖放、双击、停留或任何其他适当的用户交互。
69.设计创建界面300还包括工具栏320，其提供用于设计创建和编辑的各种工具。在该特定示例中，工具包括：设计元素选择工具322，允许用户选择已添加到页面304的特定设计元素；绘图工具324，允许用户绘制具有几何形状或其他形状的设计元素(一些这样的设计元素以矢量图形格式保存)；文本工具326，允许用户添加文本设计元素；导入工具328，允许用户从另一个源导入设计元素(例如，存储在本地或远程可访问存储器上的设计元素、来自第三方服务器的设计元素等等)。
70.虽然未示出，但工具栏320通常是自适应工具栏，因为所提供的工具根据用户正在做什么而改变。例如，如果用户选择文本工具326，则可以显示与文本相关的附加(或替代)工具：例如字体选择工具和文本大小工具。
71.在本示例中，工具栏320还包括设计元素重新着色控件330，其激活触发如下所述的设计元素重新着色过程。
72.一般而言，为了创建设计，用户创建页面并向该页面添加设计元素。可以通过多种方式添加设计元素。例如，用户可以与设计元素搜索和选择窗格310交互以搜索/浏览设计元素，并且然后将设计元素添加到正在创建的设计中——例如通过选择设计元素预览314，将其拖到页面304上的位置，并将其放下。或者，用户可以创建并添加全新的设计元素——例如通过使用诸如绘图工具324之类的工具绘制设计元素或通过文本工具326添加自定义文本来实现。此外，可替代地，用户可以通过导入工具328导入设计元素。
73.在该特定示例中，页面304包括单个设计元素340。示例设计元素340是矢量图形设计元素。鉴于黑白图的限制，下面参考图4进一步描述设计元素340。
74.本示例的界面300还包括调色板菜单350，其包括多个(在这种情况下为5个)颜色按钮352a-352e。调色板菜单350的显示可以例如是：永久的；通过控件(例如菜单或其他控件)打开和关闭；响应选择元素组中的特定元素而显示；响应于重新着色控件330的激活而显示；响应替代事件(用户或程序驱动)而显示。
75.颜色按钮352a-352e的外观可以根据上下文而改变。例如，如果没有选择特定的设计元素，则客户端应用程序112可以被配置为使每个颜色按钮352显示：在被显示的页面中已经使用的特定颜色；当前显示页面所属的设计中使用的特定颜色；用户最近使用/选择的颜色；可供用户使用的颜色。
76.如下所述，在已经选择了特定设计元素的情况下，在某些实施例中，客户端应用程序112被配置为使每个颜色按钮352显示在所选择的设计元素中使用的或代表所选设计元素中使用的一组颜色的颜色。在该特定示例中，使用五个颜色按钮352，在任何给定时间最多可显示五种颜色。虽然客户端应用程序112可以配置为显示更多(或更少)的彩色按钮，但由于可用的屏幕空间或人类认知因素，可以显示的按钮数量将受到实际限制。
77.界面300仅作为示例提供，并且替代用户界面(具有替代用户界面元素和控件)是可能的。
78.如上所述，本公开将提供使用svg格式矢量图形的示例。可以在万维网联盟发布的可缩放矢量图形规范中找到有关svg格式的信息。
79.然而，一般而言，给定的svg存储在包括(尤其)一个或多个元素的文件中。为清楚起见，构成svg的元素将被称为svg元素。这与包含在设计/设计页面中的元素形成对比，这些元素将被称为设计元素。
80.例如，上面的设计元素340是包括多个svg元素的svg设计元素。设计元素340的svg文件的删节版本(省略了特定的路径命令)如下：
[0081][0082]
因此，设计元素340由九个路径定义并包括七种不同的颜色(#e8d5ea、#c58ebf、#cfa4cc、#ddbddc、#bb76b0、#97c6d5和#7fb7c8)。
[0083]
为了说明这些路径/颜色，图4提供了设计元素340的一个版本，但具有指示路径的黑色轮廓(黑色轮廓实际上并未由上面的svg示例定义，但为了说明的目的而添加到图4中)。图4还分别显示了每个路径。具体：兔身体402是颜色#e8d5ea；兔鼻子404是颜色#c58ebf；兔耳406的内部是颜色#cfa4cc；腿部重点线408是颜色#ddbddc；眼睛和胡须410是颜色#bb76b0；领结背景412是颜色97c6d5；并且三个领结条纹414中的每一个都是颜色#7fb7c8。
[0084]
svg标准定义了各种类型的svg元素。例如，这些包括定义特定形状的形状元素——例如矩形元素、圆形元素、椭圆元素、线元素、折线元素、多边形元素、路径元素。
[0085]
给定的svg形状元素可以定义或引用一种或多种颜色。例如，形状元素可以直接定义填充颜色和/或描边颜色。可替代地，一个形状元素可以引用定义一种或多种颜色的另一个svg元素(例如定义“停止”颜色的样式元素或渐变元素)。进一步可替代地，颜色可以从父元素继承或通过css来配置。
[0086]
为了提供一个简单的示例，下面定义了一个svg，它具有：宽度为200；高度为200；以及单个矩形元素。矩形元素有：宽度＝100；高度＝100；红色填充(fill＝"rgb(255,0,0)")；以及一条线宽为5(stroke-width:5)的蓝线(stroke＝"rgb(0,0,255)")。
[0087][0088]
作为另一示例，以下定义具有与上述相同的矩形但还包括在该矩形右侧的圆形元素的svg。圆形元素的填充引用了svg的另一个定义元素(fill＝"url(#gradient1)")。在这种情况下，引用的元素是一个线性渐变，从红色(《stop offset＝"0％"stop-color＝"red"/》)垂直过渡到蓝色《stop offset＝"100％"stop-color＝"blue"/》)。
[0089][0090]
现在将描述为了重新着色所选矢量图形所涉及的处理。
[0091]
某些操作被描述为由矢量图形重新着色组件(rc)114执行。如上所述，rc 114可以安装在服务器系统(例如102)或客户端系统(例如110)上。可替代地，由rc 114提供的功能可以由服务器应用程序(例如在服务器系统102上运行的服务器应用程序104)、客户端应用程序(例如在客户端系统110上运行的客户端应用程序112)或由运行在相同或不同系统上的应用程序的组合来提供。
[0092]
图5是描述矢量图形重新着色过程500中涉及的操作的流程图。
[0093]
在502，检测到重新着色触发事件。
[0094]
在rc 114在服务器系统102上运行的客户端-服务器架构中(如上文参考图1所述)，客户端应用程序112或服务器应用程序104可以检测到触发事件。如果客户端应用程序112检测到触发事件，使客户端应用程序112将触发事件通知服务器应用程序104。
[0095]
在独立实现方式中(例如，其中所有处理由单个计算机执行，例如客户端系统110)，触发事件由客户端应用程序检测。
[0096]
在本实施例中，在客户端系统110处接收激活特定用户界面控件(例如，如上所述的设计元素重新着色控件330)的用户输入(例如，经由触摸屏显示器218或其他输入设备)是重新着色触发事件。其他触发事件也是可能的，例如复制/粘贴样式的用户输入、调用调色板应用程序的用户输入、实现“更改所有”颜色的用户输入、撤消或重做先前动作的用户输入和/或其他触发事件。
[0097]
在本实施例中，重新着色触发事件是关于特定设计元素的。作为示例，设计元素可以由用户在激活重新着色控件330之前选择用户界面300中的元素(例如通过点击它、接触它或以其他方式选择它)来指定。
[0098]
在504，(由客户端应用程序112或服务器应用程序104)确定特定设计元素是否是矢量图形。
[0099]
如果特定设计元素不是矢量图形(并且例如是位图等)，则处理进行到526。
[0100]
如果特定设计元素是矢量图形，则处理(在本示例中)进行到508。
[0101]
在508，rc 114处理矢量图形设计元素(或者，具体地，定义设计元素的文件)以确定文件颜色集合。文件颜色集合中的每个文件颜色是矢量图形文件中定义的颜色。
[0102]
rc 114可以被配置为以各种方式确定集合矢量图形文件颜色。下面参考图6描述
示例实现。文件颜色集合可以以任何适当的方式记录，例如列表或数组(或任何其他适当的数据类型/结构)，其中每个元素都是由矢量图形文件定义的唯一颜色。举例说明，对于上述包含正方形和圆形的svg文件，文件颜色集合可能如下：
[0103]
[rgb(255,0,0),rgb(0,0,255)]
[0104]
可以看出，尽管svg文件将颜色rgb(255,0,0)定义了两次(一次作为停止颜色，一次作为填充颜色)，但是颜色在文件颜色集合中仅记录一次。
[0105]
作为进一步的示例，对于上面的
‘
兔子’svg文件，文件颜色集合(以十六进制格式)可以如下：
[0106]
[#e8d5ea、#c58ebf、#cfa4cc、#ddbddc、#bb76b0、#97c6d5、#7fb7c8]
[0107]
在某些实现方式中，在确定矢量图形文件颜色之后，rc 114生成在下游处理中使用的转换后的文件颜色值。每个转换后的文件颜色值对应于实际文件颜色，但已转换为特定的颜色模型格式。在本实施例中，rc 114将每个文件颜色转换为cie-l*ab值(简称lab值)。已知用于将给定颜色从一种颜色模型(例如rgb)转换为另一种颜色模型(例如lab)的各种算法。举例来说，与上述svg文件(包括正方形和圆形)相对应的转换后的文件颜色可以(取决于所使用的转换算法)如下：
[0108]
[lab(54.2917,80.8125,69.8851),lab(29.5676,68.2986,-112.0294)]
[0109]
在某些实现方式中，rc 114在508处确定矢量图形文件中定义的所有颜色。在替代实现方式中，rc 114仅确定文件中定义的颜色的子集——例如仅填充颜色(而不是线/描边颜色)。在此类实现方式中，重新着色限于在508处确定的文件颜色的子集。
[0110]
在本实施例的510，rc 114确定设计元素是否是彩色复合矢量图形。做出该确定是为了在不保证/不需要的情况下放弃下面描述的更密集的处理。
[0111]
在某些实现方式中，rc 114通过确定设计元素是否定义至少阈值数量的颜色来确定设计元素是否是颜色复杂矢量图形——例如，在508确定的矢量图形文件颜色的数量是否大于或等于颜色的阈值数量n(例如n＝5)。
[0112]
如果rc 114确定设计元素不是彩色复杂矢量图形，则处理进行到526。
[0113]
如果rc 114确定设计元素是彩色复合矢量图形，则处理进行到512。
[0114]
在512处，rc 114确定存在于矢量图形设计元素中的主色的数量(k)。下面参考图7描述处理设计元素以确定主色。在本示例中，该处理为正在处理的矢量图形生成k个主色的主色数据结构(例如列表等)。
[0115]
在514处，rc 114生成文件颜色组集合。这涉及将每个(或至少一些)矢量图形文件颜色(在508处确定)与主色之一(在512处确定)相关联。
[0116]
可以以各种方式执行给定矢量图形文件颜色与特定主色的关联，并且将取决于所使用的颜色空间。作为lab或rgb颜色空间的示例，rc 114计算给定颜色与每种主色之间的距离(例如欧几里得距离)。rs 114然后将给定颜色与它最接近的特定主色相关联。如果给定颜色与两个或更多个主色等距，则它可以与这些主色中的任何一种相关联。
[0117]
在某些实现方式中，如果给定文件颜色与其最接近的主色之间的距离超过距离阈值，则给定文件颜色被排除在重新着色之外(例如通过从在508处生成的文件颜色列表中移除或以其他方式标记该颜色)。任何被排除在重新着色之外的颜色在任何下游重新着色处理中都保留其原始颜色。在应用时，距离阈值可以通过多种方式设置。例如，阈值距离可以
基于所有文件颜色与其最接近的主色的距离的统计分析来确定，例如通过将阈值距离设置为等于从文件颜色的平均值到最接近的主色距离的2个标准差的值。可替代地，阈值距离可由用户手动配置。
[0118]
rc 114将在514处创建的文件颜色组存储在文件颜色组数据结构中，其每个记录将特定文件颜色与特定组标识符相关联。组标识符可以是用于生成组的主色的值。例如，文件颜色组数据结构可以是如下表结构(为了方便使用rgb值，但注意在某些实现方式中使用lab值)：
[0119]
文件颜色组标识符255,255,255255,255,255255,255,254255,255,255255,254,255255,255,255254,255,255255,255,2550,125,150,125,01,120,150,125,0
……
[0120]
可以看出，每个文件颜色映射到单个组标识符(在这种情况下是主色值)，但是每个组标识符可以与多个文件颜色相关联。
[0121]
在516处，在本实施例中，rc 114为在514处创建的每个矢量图形文件颜色组确定代表性颜色。
[0122]
在某些实现方式中，rc 114被配置为将给定颜色组的代表性颜色确定为用于生成该组的主色。
[0123]
在替代实现方式中，rc 114被配置为通过基于作为颜色组成员的文件颜色计算新颜色来确定给定颜色组的代表性颜色。在这种情况下，例如，rc 114计算作为给定组成员的所有文件颜色的平均颜色，并将该平均值用作给定组的代表性颜色。以这种方式计算时，平均颜色可能与现有文件颜色(或主色)相同，但可能不同。
[0124]
在rc 114计算作为组成员的所有文件颜色的平均颜色的情况下，它可以被配置为基于颜色的特定颜色空间格式(例如lab值)来这样做。在这种情况下，如果文件颜色尚未转换为lab值，则这由rc 114完成(例如如上所述)。
[0125]
在计算代表性颜色(而不是使用主色)的情况下，rc 114可以被配置为将它们存储在代表性颜色数据结构中，例如(为了方便再次使用rgb值)：
[0126]
组标识符代表性颜色255,255,255xxx,xxx,xxx0,125,0xxx,xxx,xxx
[0127]
用于将颜色组与其代表性颜色相关联的替代方式是可能的。
[0128]
在518处，rc 114使颜色组代表性颜色显示在用户界面中(例如，在显示器218上)。在rc 114在服务器端实现的情况下，这涉及将代表性颜色传送到客户端应用程序112。
[0129]
可以生成各种用户界面来显示代表性颜色，然而在本示例中，每个代表性颜色显示在调色板菜单350的颜色按钮352中。在颜色组的数量(以及因此其代表性颜色的数量)少于或多于颜色按钮352的数量的情况下，客户端应用程序112可以被配置为使用户界面相应
地显示附加/更少的颜色按钮352。
[0130]
在520处，rc 114接收颜色变化数据。
[0131]
在本示例中，颜色变化数据是基于在客户端系统110处做出并由客户端应用程序112接收的颜色变化用户输入生成的。颜色变化数据被传递到rc 114(例如在rc 114在服务器端实现的情况下，被传递到服务器应用程序104)。
[0132]
在本实施例中，颜色变化数据包括指示要改变的特定颜色组的颜色组标识符和指示该特定颜色组的新颜色的新颜色数据。
[0133]
用于选择颜色组和用于该组的新颜色的各种颜色变化用户界面和用户输入是可能的。
[0134]
例如，参考上述用户界面300，用户可以通过选择特定按钮352来选择要改变的特定颜色组。根据518，特定按钮352将显示特定颜色组的代表性颜色——定义颜色变化数据的颜色组标识符的特定颜色组。
[0135]
对特定按钮352的选择还可导致颜色选择界面被显示(如果尚未显示)，用户可以通过该界面选择新颜色(从而生成新颜色数据)。可以提供和使用任何适当的颜色选择界面，例如：颜色滑块，提供可由用户操作以选择颜色的滑动控件；色轮/调色板/选择器控件，可由用户操作以选择特定颜色；可以输入颜色的文本输入字段(纯文本、rgb值或替代颜色定义)；颜色拾取器工具(例如吸管式工具)，可用于选择用户屏幕上显示的另一种颜色；或任何其他颜色选择界面。
[0136]
通常，一旦选择了新颜色，所选的特定按钮的颜色将被改变。在某些实现方式中，按钮更改为所选的新颜色。在替代实现方式中，按钮的新颜色基于在执行重新着色之后的组中的颜色的平均值来计算(在522处)。这可以以与在516处计算代表性组颜色的方式相同或类似的方式来完成。
[0137]
在522处，响应于接收到颜色变化数据，rc 114调整所讨论的矢量图形的颜色。下面参考图8描述示例颜色调整过程。
[0138]
在524处，rc 114确定是否接收到进一步的颜色变化数据。例如，如果用户选择要调整的新颜色组(经由替代颜色按钮352)并调整该新代表性颜色，或者用户对相同颜色组进行进一步调整，则可能发生这种情况。如果接收到进一步的颜色变化数据，则处理返回到520以重新着色矢量图形。
[0139]
如果没有接收到进一步的颜色变化数据(例如，用户关闭所讨论的设计，通过选择替代控件退出重新着色模式，或者在定义的时间段内不进行输入)，则重新着色过程500完成。在这种情况下，用户可以接受颜色更改(在这种情况下保存重新着色的矢量图形)或拒绝它们(在这种情况下更改被丢弃)。
[0140]
在526处，rc 114已经确定设计元素不是矢量图形(在502处)或者不是颜色复杂矢量图形(在510处)。在任一情况下，启动替代过程(未描述)。取决于实现方式以及如何到达操作526，替代过程可以只是生成指示元素不是矢量图形并且不能执行重新着色的消息。可替代地，客户端应用程序112和/或服务器应用程序104可以被配置为执行适合于所讨论的设计元素的类型(例如位图重新着色过程)和/或所讨论的设计元素的颜色复杂性的替代重新着色过程。
[0141]
虽然上面没有描述，但是rc 114可以被配置为存储为给定矢量图形生成的各种数
114可以处理该集合以去除任何重复的颜色。
[0156]
在上述过程500的512处，rc 114处理矢量图形以确定主色。图7提供了用于这样做的示例过程700。
[0157]
在702处，rc 114栅格化矢量图形以生成定义图形的栅格版本的栅格数据。
[0158]
各种颜色方案可用于确定主色(例如cie、rgb、hsv、cmyk或替代颜色方案)。然而，在本实施例中，使用cie-l*ab颜色模型(lab)。因此，702处的栅格化被配置为将栅格化像素转换为lab颜色模型以供处理。
[0159]
在704处，rc 114对栅格数据采用聚类算法来计算图形内的颜色簇的数目(k)——即类似颜色像素的簇。
[0160]
为此可以使用各种算法，例如k均值聚类算法。
[0161]
在706处，rc 114计算在704处计算的每个簇的代表性颜色。这可以针对给定簇执行，例如，通过计算分配给给定簇的所有像素的平均颜色。
[0162]
在706处计算的每个代表性颜色被记录为矢量图形的主色。
[0163]
可以以各种方式确定颜色簇的数量k(以及因此确定的主色的数量)。
[0164]
在某些实现方式中，k可以是预定义值。例如，k可以被设置为在调色板菜单350中显示的不同颜色按钮352的数量。在这种情况下，如果用户界面允许用户增加或减少颜色按钮352的数量(且用户这样做)，k的值将相应改变。
[0165]
在替代实现方式中，k可以根据用户输入来确定(如果没有接收到用户输入，则取默认值)。在这样的实施例中，主色确定(和/或整体重新着色过程)的结果可以呈现给用户，然后用户可以增加或减少簇的数量，以便提供不同数量的主色和不同数量的结果。
[0166]
在更进一步的实现方式中，可以使用本身确定簇数量的聚类算法(和/或其参数)——例如均值漂移聚类算法。
[0167]
在上述过程500的522处，rc 114基于颜色变化数据调整矢量图形的颜色。颜色变化数据包括指示要改变的特定颜色组的颜色组标识符和指示该特定颜色组的新颜色的新颜色数据。
[0168]
转向图8，将描述用于调整矢量图形颜色的过程800。过程800假设所有颜色都以通用格式(例如rgb、lab或替代格式)表示。如果不是这种情况，可以根据需要执行转换。
[0169]
在802，rc 114计算颜色变换，该颜色变换将被改变的特定颜色组的代表性颜色(如颜色组标识符所标识的)映射到已经为该组选择的新颜色。
[0170]
颜色变换的计算将取决于所使用的颜色空间。例如，在lab颜色模型中，这可能涉及计算在3维空间内对代表性颜色所做的精确更改，并将该更改应用于组内的所有颜色。例如，如果代表性lab颜色从[60,50,50]更改到[55,50,50]，那么原来是[51,48,30]的代表性颜色就会更改到[46,48,30]。
[0171]
在804处，rc 114使用在802处确定的颜色变换来计算与在520处选择用于重新着色的特定颜色组中的每个原始文件颜色(如在508处确定的)相对应的变换后的文件颜色。
[0172]
计算与给定的原始文件颜色相对应的变换后的文件颜色可以以各种方式进行。
[0173]
在某些实施例中，rc 114直接将在802处确定的颜色变换应用于所讨论的原始文件颜色。
[0174]
如果这导致正在使用的颜色空间内的新颜色值，则结果被记录为对应于原始文件
颜色的变换后的文件颜色。但是，如果变换导致新颜色值超出所使用的颜色空间——即达到色域边界——则变换后的文件颜色将被记录为色域边界处的颜色。
[0175]
这种方法的潜在问题是重要的颜色信息可能会在变换中丢失。例如，考虑具有从一种颜色过渡到另一种颜色的颜色渐变的形状。如果渐变中间的停止颜色到达(或通过)色域边界，则该停止颜色将变换为色域边界颜色，渐变中的所有后续停止颜色也将如此。在这种情况下，变换将导致原始形状的一部分是纯色而不是平滑过渡的渐变。
[0176]
为了解决这个问题，在替代实现方式中，rc 114不直接将在802处确定的颜色变换应用于原始文件颜色。相反，rc 114计算变换后的文件颜色，使得它们基于它们与边界的原始距离成比例地接近色域边界。
[0177]
一旦计算出，变换后的文件颜色就可以存储在变换后的文件颜色数据结构中，该数据结构包括将原始文件颜色与变换后的颜色相关联的每个原始文件颜色的记录。可以使用任何适当的数据类型或结构，但作为示例，变换后的文件颜色数据结构可以是如下表：
[0178]
原始文件颜色变换后的文件颜色
……
[0179]
在806，rc 114生成重新着色的矢量图形文件。为此，rc 114遍历原始矢量图形文件(或其副本)并用其对应的变换后的文件颜色替换每个原始文件颜色。
[0180]
在仅文件颜色的子集被重新着色的情况下，这在806被考虑。例如，如果仅填充颜色被重新着色(而不是线条/描边颜色)，则在806处仅填充颜色被替换。
[0181]
在808处，rc 114使重新着色的矢量图形文件由客户端应用程序112显示(例如，在显示器218上)，代替原始矢量图形文件。当rc 114在服务器端执行操作时，这涉及将重新着色的矢量图形文件传送到客户端应用程序112(通过服务器应用程序104)。
[0182]
可替代地，代替rc 114在806处生成重新着色的矢量图形文件，rc 114可以将变换后的文件颜色数据结构传送到客户端应用程序112，然后客户端应用程序112可以自己生成重新着色的矢量图形文件。
[0183]
除了变换作为在804处选择的特定组的成员的各个文件颜色之外，rc 114可以确定已经改变的颜色组的代表性颜色。这可以通过多种方式完成。例如，rc 114可以使用在520选择的新颜色作为变换后的颜色组的新代表性颜色。可替代地，rc 114可基于作为该颜色组成员的颜色(如经变换)(例如变换后的组颜色的平均值或替代地计算出的颜色)来计算该组的新代表性颜色。一旦计算了变换后的组的代表性颜色，rc 114就可以使其显示出来(例如，使用被选择来引起重新着色的颜色按钮352)。
[0184]
然后过程800完成。
[0185]
将参考矢量图形设计元素340(上面参考图4描述)来描述示例重新着色过程。
[0186]
参考如上所述的矢量图形设计元素340，在508处识别的文件颜色(在这种情况下仅填充)可以在文件颜色表中表示如下(文件颜色编号为1至7)。
[0187][0188][0189]
在512处，识别两种主色，在514处，将文件颜色中的每一种分配给组(组a或组b)，并且在516处确定这些组的代表性颜色。这在下表中描述：
[0190]
参考原始文件颜色颜色组代表性组颜色1#e8d5eaa#cb8dbc2#c58ebfa#cb8dbc3#cfa4cca#cb8dbc4#ddbddca#cb8dbc5#bb76b0a#cb8dbc6#97c6d5b
…
7#7fb7c8b
…
[0191]
在该示例中，原始颜色(参考1至5)已分配给组a，其代表性颜色已计算为#cb8dbc。
[0192]
然后可以在518处显示组a和组b的代表性颜色(例如，在调色板菜单350的颜色按钮352中)。
[0193]
在520处，用户然后可以选择代表组a的颜色按钮，并且经由颜色变化界面，将代表组a的颜色改变为新颜色——在这种情况下颜色#495ecb。这会导致为确定在颜色组a中的每个原始文件颜色(根据“重新计算的文件颜色”列)计算新颜色(在804处)。在这种情况下，还为组a确定了新的代表性组颜色，新的代表性组颜色反映了已为该组所做的颜色改变。例如：
[0194][0195]
在806处，生成重新着色的矢量图形文件。在这种情况下，重新着色的svg文件的删节版本(省略了特定的路径命令)如下：
[0196][0197]
可以看出，当重新着色后的svg文件与原始svg文件进行比较时：前五个路径元素(定义确定为在a组中的颜色)的颜色发生了改变；最后四个路径元素的颜色(定义确定为在b组中的颜色)没有改变。这样做的结果是兔子本身的颜色改变了，但兔子领结的颜色没有改变。
[0198]
图9提供了原始矢量图形340和该矢量图形902的重新着色版本的图示(尽管是灰度的)。
[0199]
可以对上述处理进行各种调整。
[0200]
举例来说，在某些实现方式中，rs 114被配置为确定(例如在栅格化图形之后的512处)是否有任何特定颜色或色带——例如黑色或接近黑色)具有小于定义的阈值的与它们相关的像素百分比(例如，如果《n％的图形像素属于特定颜色/色带——n例如为5％)。如果是，则在确定主色时可以忽略这些颜色并从进一步重新着色中去除这些颜色(例如，通过将相关颜色映射回一种或多种文件颜色并从在508处生成的文件颜色列表中去除该/那些文件颜色)。
[0201]
作为进一步的示例，在某些实现方式中，在确定主色之后，rs 114被配置为确定与任何主色相关联的像素的百分比是否小于定义的阈值(例如5％)数。如果是，rs 114会重新计算主色而忽略那些像素。
[0202]
上面关于单个矢量图形描述了重新着色过程。然而，所述处理可以在多个矢量图形——例如一组矢量图形上执行(或适合执行)。在这种情况下，需要调整各个步骤。例如，在508处，为所有正在处理的矢量图形确定矢量图形文件颜色(并且从那时起所有文件颜色都用于进一步处理)。
[0203]
图中所示的和以上描述的流程图以特定顺序定义操作以解释各种特征。在某些情况下，所描述和图示的操作可能能够以与所示/所描述的不同的顺序执行，一个或多个操作可以组合为单个操作，单个操作可以划分为多个单独的操作，和/或由一个或多个所描述/图示的操作实现的功能可以通过一个或多个替代操作实现。更进一步，给定流程图操作的功能/处理可能由不同的系统或应用程序执行。
[0204]
除非另有说明，术语“包括”和“包含”(及其变体，例如“包括有”、“包含有”等)被包含性地使用并且用于不排除进一步的特征、组件、整数、步骤或元素。
[0205]
应当理解，在本说明书中公开和定义的实施例扩展到在文本或附图中提到的或从文本或附图显而易见的两个或更多个单独特征的替代组合。所有这些不同的组合构成了本公开的替代实施例。
[0206]
本说明书参考可能随实现方式不同而不同的许多具体细节来描述各种实施例。权
利要求中未明确记载的任何限制、要素、特性、特征、优点或属性均不应被视为必需或必要特征。因此，说明书和附图被认为是说明性的而不是限制性的。