用于电子产品设计的图像编辑的系统与方法

摘要

允许用户参与定制电子产品的电子文档设计系统与方法，选择图像容器并修改与该图像容器关联的图像的放置、缩放和显示部分。当用户从产品设计选择了一个图像容器时，向用户呈现图像窗格，该图像窗格显示了与被选图像容器关联的基本图像及在图像容器和图像窗格中任何一个或者两个上的至少一个有效控制件，该有效控制件允许用户修改基本图像的哪部分及该部分如何呈现在电子产品设计中。图像编辑器工具与产品设计同时显示，以便允许用户立刻看到由于利用有效控制件进行的对被选图像容器的放置或缩放或者基本图像裁剪或者基本图像的出现在图像容器内的部分的放大倍数的修改而造成的产品设计中的结果变化。

说明书

技术领域

本发明涉及计算机实现的自动化电子产品设计。

背景技术

许多个人、企业及组织有时会需要定制打印的或电子显示的产品，例如出生公告、派对请柬、产品或服务手册、宣传海报、个性化的节日卡片或者任何数量的其它物品。对于打印的产品，这些个人和企业中的一些求助于诸如帮助准备材料的本地打印店的源。利用任何可用于购买并安装到适当计算机系统中的各种专业化软件产品或者通过使用基于网络的打印服务提供商，那些能访问合适计算机的人可以自己执行产品设计过程，其中基于网络的打印服务提供商利用网络和现代网络浏览器的能力在用户方便的任何时间与地点从具有网络访问的任何计算机提供文档设计服务。对于打印产品和电子显示产品中的任何一种或者二者兼有，网络使能的服务提供商，或者至少具有可以让顾客使用的计算机系统的那些服务提供商，一般向他们的顾客提供访问并观看预先设计好的产品模板及输入创建定制产品设计的信息的能力。如在此所使用的，术语“产品模板”或者“产品设计模板”是具有预先设计好的格式的电子显示可编辑WYSIWYG产品设计。如在此所使用的，术语“WYSIWYG”代表“所见即所得(What You SeeIs What You Get)”，其中产品设计模板以指示该产品在打印时将如何呈现的形式显示在用户的计算机屏幕上。因此，在用户编辑产品设计模板时，产品设计模板是在用户的计算机屏幕上更新和显示，使得产品设计模板看起来就是打印或者以别的方式电子显示时所呈现的产品设计。产品设计模板一般用作用户个性化的起点，因此格式不需要由用户创建或者在每次使用其的时候都重新创建。

预先设计好的电子产品模板的使用对产品设计系统的灵活性和其对许多顾客的有用性强加了限制和约束。传统上，模板提供者通过定义模板的各种部件单独地设计每种模板，例如模板中所有图像和文本区域的大小和位置；所有图像的选择、裁剪和定位；要用于具有色彩属性的模板部件的配色方案和色彩的选择，等等。模板设计者调整各种部件，直到设计者对模板的整体外观感到满意。

一旦产品设计模板完成，它就可以由服务提供商发布并使得顾客可以用于选择和编辑，以允许用户利用特定于顾客的信息来个性化该模板设计。因为产品设计模板已经预先设计好了，所以它允许顾客快速地添加文本和上载图像(或者从已经由模板设计者或服务提供商预先选择的多个可能选项中选择一个或多个图像)，以便快速地生成用户定制的产品设计。然而，模板的用户编辑一般局限于允许用户添加、修改和放置文本并有可能上载要添加到产品设计的图像。

这种现有技术的单独模板设计方法不仅对于模板提供者来说既耗时又开销极大，而且它以若干途径限制了服务提供商完全满足其顾客期望与需求的能力。例如，产品设计模板提供者可能有许多它想让其顾客获得使用的电子图像，但是模板提供者可能只用这些资源产生了有限数量的模板变化，留下许多图像不能为顾客使用和获得。此外，模板提供者所提供的各种产品的大小与形状需要模板提供者关于要结合到特定产品设计中的图像部分作出图像裁剪决定。有些顾客可能希望修改图像的裁剪设置。尽管存在允许用户修改图像的裁剪边界的裁剪工具，但是这些裁剪工具在被激活时一般是在完全单独的窗口或页面中打开，而没有不首先退出工具或关闭窗口就观看产品设计中裁剪效果的能力。其它工具可以显示产品设计，但在退出裁剪工具之前，不能更新对显示在产品设计中的图像部分的改变。然而，当前还不存在这样的工具，其允许顾客同时观看其上具有裁剪指示符(指示出现在产品设计模板上的图像部分)的基本图像和当被裁剪指示符选择时在其中显示该图像部分的产品设计模板，以允许顾客修改裁剪窗口或图像容器的各方面，并立即在裁剪窗口和产品设计中看到修改的效果。此外，尽管有些潜在的顾客可能喜欢特定产品设计模板的图像内容，但他们可能希望有更多的模板编辑能力，来操纵设计中各个图像的大小、放置、放大及部分，同时能够在产品设计模板中看到这种改变的结果。

因此，需要一种灵活的电子产品编辑和定制系统，其允许用户以如下方式选择电子产品设计模板的图像容器并且方便容易地修改与该图像容器相关联的图像的放置、缩放和所显示部分：允许用户同时观看选择用于关于与该图像容器相关联的基本图像显示的图像部分和该基本图像被选部分的结果图像内容，就象其如产品设计模板中所示出现在产品设计中的那样。

发明内容

本发明致力于满足对用于提供灵活电子产品设计图像编辑工具的计算机实现系统与方法的需求。

在一种实施例中，提供了一种用于方便对电子产品设计中图像容器的图像内容进行用户定制的计算机实现方法。该方法包括：向用户显示电子设计，该电子设计包括至少一个图像容器，该至少一个图像容器与对应的基本图像相关联并在其中显示所述基本图像的一部分；允许用户从所述电子设计中选择图像容器以进行定制；以及当用户从所述电子设计中选择了图像容器之后，与所述电子设计同时地向用户显示图像窗格，该图像窗格显示了与被选图像容器相关联的整个基本图像，由此允许用户在所述电子设计的环境下同时观看与被选图像容器相关联的基本图像和出现在所述电子设计中的基本图像的所述部分。

在另一种实施例中，提供了其中包含计算机程序代码的一种或多种计算机可读介质，其中计算机程序代码方便对电子设计中图像容器的图像内容进行用户定制，所述代码包括：用于向用户显示电子设计的代码，该电子设计包括至少一个图像容器，该至少一个图像容器与对应的基本图像相关联并在其中显示所述基本图像的一部分；用于允许用户从所述电子设计中选择图像容器以进行定制的代码；用于从所述电子设计接收对图像容器的用户选择的代码；以及用于与所述电子设计同时地向用户显示图像窗格的代码，该图像窗格显示了与被选图像容器相关联的整个基本图像，由此允许用户在所述电子设计的环境下同时观看与被选图像容器相关联的基本图像和出现在所述电子设计中的基本图像的所述部分。

在再一种实施例中，提供了一种用于方便对电子设计中图像容器的图像内容进行用户定制的系统，该系统包括一个或多个处理器；以及其中包含计算机代码的一种或多种计算机可读介质，所述计算机代码在被所述一个或多个处理器执行时实现了一种方法，该方法包括：向用户显示电子设计，该电子设计包括至少一个图像容器，该至少一个图像容器与对应的基本图像相关联并在其中显示所述基本图像的一部分；允许用户从所述电子设计中选择图像容器以进行定制；以及当用户从所述电子设计选择了图像容器之后，与所述电子设计同时地向用户显示图像窗格，该图像窗格显示了与被选图像容器相关联的整个基本图像，由此允许用户在所述电子设计的环境下同时观看与被选图像容器相关联的基本图像和出现在所述电子设计中的基本图像的所述部分。

在又一种实施例中，提供了一种用于方便对电子设计中图像容器的图像内容进行用户定制的计算机实现方法，该方法包括将计算机程序代码下载到用户计算机以在该用户计算机上执行，所述计算机程序代码便于对电子设计中图像容器的图像内容进行用户定制，并且包括：用于向用户显示电子设计的代码，该电子设计包括至少一个图像容器，该至少一个图像容器与对应的基本图像相关联并在其中显示所述基本图像的一部分；用于允许用户从所述电子设计中选择图像容器以进行定制的代码；用于从所述电子设计接收对图像容器的用户选择的代码；以及与所述电子设计同时地向用户显示图像窗格的代码，该图像窗格显示了与被选图像容器相关联的整个基本图像，由此允许用户在所述电子设计的环境下同时观看与被选图像容器相关联的基本图像和出现在所述电子设计中的基本图像的所述部分。

在还一种实施例中，提供了一种用于方便对电子设计中图像容器的图像内容进行用户定制的系统，该系统包括一个或多个处理器；以及其中包含计算机代码的一种或多种计算机可读介质，所述计算机代码在被所述一个或多个处理器执行时实现了一种方法，该方法包括将计算机程序代码下载到用户计算机以在该用户计算机上执行，所述计算机程序代码便于对电子设计中图像容器的图像内容进行用户定制，并且包括：用于向用户显示电子设计的代码，该电子设计包括至少一个图像容器，该至少一个图像容器与对应的基本图像相关联并在其中显示所述基本图像的一部分；用于允许用户从所述电子设计中选择图像容器以进行定制的代码；用于从所述电子设计接收对图像容器的用户选择的代码；以及与所述电子设计同时地向用户显示图像窗格的代码，该图像窗格显示了与被选图像容器相关联的整个基本图像，由此允许用户在所述电子设计的环境下同时观看与被选图像容器相关联的基本图像和出现在所述电子设计中的基本图像的所述部分。

附图说明

图1是可以采用本发明的计算机系统的框图；

图2至图16是呈现给参与设计电子文档的用户的显示的示意性表示；及

图17是计算机实现方法的示例性实施例的流程图。

具体实施方式

参照图1，示例性用户计算机系统UCS 100包括处理器101和存储器102。存储器102代表所有提供数据存储的UCS 100部件和子系统，例如RAM、ROM和硬盘驱动器。除了为安装在UCS 100上的所有程序提供永久性存储之外，存储器102还提供操作系统和应用程序执行时所需的临时存储。在优选实施例中，UCS 100一般是整装的个人计算机，但UCS 100还可以是便携式计算机、平板计算机或其它设备。用户在诸如CRT或LCD屏幕的显示器140上观看来自UCS 100的图像，并通过诸如键盘和鼠标的输入设备150将输入提供给UCS100。

当UCS 100运行时，USC 100操作系统的实例(在图1中由操作系统103表示)将运行。此外，用户可以运行一个或多个应用程序。在图1中，UCS 100运行网络浏览器105，例如来自微软公司的InternetExplorer。其它可以在USC 100中运行的应用程序(例如，电子表格、电子邮件和演示程序)表示为应用程序104。在所示实施例中，设计工具106包括通过网络120从远程服务器110下载到UCS 100的一个或多个产品设计程序，例如由VistaPrint有限公司提供的并且可以在vistaprint.com上公开获得的可下载设计工具。设计工具106运行在浏览器105中，并且允许用户准备电子形式的定制产品设计。可选地，设计工具106可能已经由用户从存储器102或者从其它的本地源获得。设计工具106包括图像编辑器工具120，该图像编辑器工具120为用户提供在电子产品设计中缩放121、放置122、裁剪123和放大124图像的工具。当用户对产品的设计满意时，设计可以上载到服务器110用以存储，而且如果用户期望，则在适当的打印和打印后处理系统上进行期望数量的物理产品的后续制作。尽管服务器110在图1中示为单个块，但应当理解，服务器110可以是配置成通信并合作地操作的多个服务器。

存储器111代表提供服务器数据存储的所有部件和子系统，例如RAM、ROM和盘驱动器或阵列。模板存储器112包含由服务提供商提供的各种布局、设计、颜色、字体及其它信息，使得能够创建并渲染(render)产品设计模板。如在这种实施例中所使用的，模板是产品设计的XML描述，该描述指定诸如文本容器、图像容器、图形、z-索引值等所有产品设计元素的初始大小、位置和其它属性。站点操作员可以允许用户修改一个或多个模板元素。

图像存储器113代表存储器111的包含图像及由服务提供商用于生成产品设计的任何相关图像属性的部分，其中的图像属性例如是图像大小、与图像相关联的缺省颜色及由打印服务提供商关联到图像的一个或多个关键字。图像存储器113包括基本图像，而且可以但不必要包括由服务提供商准备成适合各种图像容器形状的该基本图像的一个或多个裁剪版本。很多种不同的模板可以通过布局与图像的组合来创建。受让给本申请代理人且题为“Automated Image Resizing andCropping”的美国专利7,133,050公开了用于组合单独存储的图像与布局以便创建文档设计的文档编辑系统，该专利的全部内容通过引用并入于本申请中。

图2是UCS 100的用户在用户显示器140上观看的介绍性产品选择页面200的简化表示。在这个例子中，页面显示并宣传可以从服务提供商获得的各种产品，并提供允许UCS 100的用户选择期望类型的产品进行设计选项的更具体演示的有效控制件。作为例子，图2示出了用于名片210、明信片220、信纸230、折叠卡片240、寄信人地址标签250和手册260的宣传图像。用于较少、不同或附加产品的图像或宣传也可以与其它信息和链接一起给出，其中较少、不同或附加产品例如是演示文件夹、邀请函、公告、感谢卡、礼物标签等。应当理解，本发明不限于要最终打印的文档。本发明还适用于要以电子形式使用的文档的设计，例如电子名片、在线手册及用于演示图形软件程序的模板。本发明还可以容易地适用于用户可能希望定制的很大范围的产品，例如衣服、产品容器、宣传产品等项。还应当理解，尽管本发明是在电子产品设计模板的实施例的环境下描述的，但图像编辑工具还可以应用在任何类型的电子图形设计的环境下，例如电子发布工具、网站设计工具，等等。

作为例示性例子，假设UCS 100的用户期望创建个性化的明信片，并且因此，例如通过用用户的鼠标光标在明信片220图像上点击来选择明信片选项。然后，将向用户呈现一个或多个附加选择画面(未示出)，从这一个或多个附加选择画面用户可以通过通用的主题或题目来查看各种明信片类别，然后当选择了期望的类别时，查看由服务提供商准备的一页或多页明信片模板缩略图图像。当定位了期望的模板缩略图后，用户可以在该缩略图图像上点击，使得服务器110下载所选的产品设计模板信息并启动定制产品设计会话。作为提供大的缩略图模板图像库让用户扫描的另选方案，服务提供商可以提供关键字搜索工具，以允许服务提供商只显示具有与用户搜索项对应的图像或其它内容的模板的缩略图。

参照图3，当用户选择了用户期望定制的特定产品设计模板的缩略图图像后，就向用户呈现显示了所选产品设计的较大可定制产品设计模板301的定制页面300。所选的产品设计模板301可以包含多种和大量的图像、颜色、图形及其它设计部件。为了讨论简单起见，在图3所示的例子中，产品设计模板301表示由用户设计的明信片的一面。

被选的产品设计模板301可以包括显示由用户个性化了的文本的文本容器306、308、310、312。提供允许用户定制文本容器306、308、310、312的内容的工具。在一种实施例中，定制页面300包括提示用户用于每个文本容器的个性化信息的文本提示。在图3的例子模板中，向用户提示关于“标题”316、“子标题”318、“附加信息”320和“呼叫动作或电话号码”322的内容。当用户针对每个提示输入文本时，该文本就自动显示在产品设计模板301中对应的文本容器306、308、310、312中，从而为用户提供关于最终产品设计将如何呈现的立即反馈。

为了容易讨论，产品设计模板301示出为具有单个图像容器302。应当理解，模板301可以有多个图像容器。如在此所定义的，图像容器是电子设计中指示图像内容的显示边界的区域。当与图像容器302相关联的基本图像未被裁剪时，图像容器的尺寸与基本图像的尺寸匹配。产品设计模板301可以自动地将图像与图像容器302关联，例如由模板设计者预先关联或者作为用户关键字搜索的结果，并且/或者产品设计模板301可以提供允许用户关联用户提供的图像或者允许用户将与容器相关联的图像改变成多个不同可选图像中任何一个的工具。

如以上所提到的，显示给用户的产品设计模板301是各种单独存储的模板部件元素(包括文本容器306、308、310、312，图像容器302及描述容器的大小和位置的布局)的组合的结果。初始的产品设计模板301是用户定制产品设计的起点。用户不仅可以添加用户的个性化文本与附加图像，还可以修改产品设计模板中图像的缩放、放置、大小改变、放大和裁剪，如以下所讨论的。

为了允许用户定制产品设计模板301，为用户提供模板编辑工具。编辑工具条330包含允许用户添加附加文本框、插入文本、改变字体、改变字体属性及执行其它典型编辑动作的各种按钮、控制与菜单。用于设计和使用编辑工具条的技术在本领域中是众所周知的。导航按钮返回332和下一个334允许用户移动返回前一个显示画面或者前进到下一个。也可以或者可选地采用不同或附加的导航方式。

依赖于服务提供商期望给予用户的定制能力等级，服务提供商还可以选择向用户提供一个或多个附加指令、工具或控制(未示出)，来方便用户对产品设计模板301的编辑，例如用于改变模板布局、配色方案、设计效果或字体策略的工具。于2003年5月20日提交的、题为“Electronic Document Modification”的共同未决与共同拥有的美国申请第10/449,836号描述了利用单独可选择的布局、设计、配色方案与字体策略的文档编辑系统与方法，该申请的全部内容通过引用并入于本申请中。

设计工具106提供了允许用户选择图像容器进行编辑的一种或多种方法。在一种实施例中，用户可以通过在产品设计模板中期望的图像上单击来选择图像容器，但是当然可以理解，也可以使用许多其它众所周知的用于图像容器选择的技术中的任何一种。

图4例示了当选择图像容器302时的产品设计模板301，其中对图像容器的选择是由界定图像容器302的周边的虚线来指示的。应当理解，可以实现许多其它允许用户指示对图像容器的选择的方法，例如，通过突出显示或者以别的方式提供被选图像容器302与产品设计模板301的其余未选部件之间的可视区别。

设计工具106提供了允许用户指示期望修改产品设计模板301中图像的一种或多种方法。例如，如图5中的当光标303放到图像容器302上时显示的弹出式指令341所例示的，设计工具106可能需要用户将光标303放到期望的图像容器上，点右键来显示下拉式动作列表并在编辑选项上点击。在另一个例子中，如图6所例示的，设计工具可能需要用户在诸如高级编辑按钮340的链接上点击。应当理解，可以实现许多其它用于允许用户指示期望修改图像容器的方法，例如，通过将用户的鼠标光标放到期望的图像容器上并双击图像，或者通过在选择图像容器时自动显示编辑工具。

参照图7，响应于用户指示期望修改被选图像容器的动作(例如利用图5或6中所例示的一种方法)，在定制窗口300中与产品设计面板301同时地将在此称为图像编辑器工具400的面板呈现给用户。图像编辑器工具400包括图像窗格410，该图像窗格410显示了当前与被选图像容器302相关联的基本图像411的缩略图图像。如果基本图像411有与图像窗格410相同的纵横比，则当其显示时将完全填满图像窗格410。然而，更有可能的是，基本图像411没有与图像窗格410相同的纵横比，因此为了显示缩略图，基本图像411的缩略图图像将被缩放，以便适合放到图像窗格410中(即，维持基本图像的纵横比)。图像窗格410中没有被基本图像411的缩略图图像填充的部分413填充以透明覆盖物。

在产品设计模板301的设计过程中，模板设计者可能事先已经裁剪了基本图像411，以便只选择图像411的一部分显示在图像容器302中。例如，在所示的实施例中，基本图像411事先已经被模板设计者裁剪到基本图像的由414处所指示的虚线中的部分，因此只有基本图像411的被裁剪部分呈现在产品设计模板301中。

在当激活图像编辑器工具400时图像没有事先裁剪的情况下，基本图像411的尺寸与被选图像容器302的尺寸成比例，而且图像容器302的图像内容对应于完整的基本图像411。

图像编辑器工具400为用户提供了修改被选图像容器302的当前放置、修改被选图像容器302的当前缩放(即，大小)、修改被选图像容器302中所显示的基本图像411的部分、及修改被选图像容器302中所显示的图像内容的放大倍数的编辑选择。尽管可以理解有许多途径来实现这各种编辑选择的激活(即，指示用户期望执行这些操作中的一个)，但是在所例示的实施例中，图像编辑器工具400具有两种模式：放置与缩放模式，其中用户可以使用放置工具351和缩放工具352，如以下联系图10-16所讨论的；及裁剪与放大模式，其中用户可以使用裁剪工具353和放大工具354，同样如以下联系图10-16所讨论的。在该例示性实施例中，放置与缩放模式是通过选择图像编辑器工具400中按钮421形式的链接来激活的。裁剪与放大模式是通过选择图像编辑器工具400中按钮422形式的链接来激活的。这些模式中的每一种都将在下面更具体地讨论。如果期望，用户还可以通过取消对图像容器302的选择(例如，通过点击产品设计图像中的其它地方)来选择取消图像编辑器工具400。

在初始激活图像编辑器工具400时，在一种实施例中(图7所示)，放置与缩放模式自动有效，即，用户可以使用。当然，在其它实施例中，裁剪与放大模式可以初始自动有效，或者其它组合或者只有一种工具(放置、缩放、裁剪、放大)可以自动有效。可选地，其它实施例可以规定在用户没有有效地选择特定操作之前没有一种工具是自动有效的。

现在转向对图7中的缩放工具352的讨论，缩放工具352是作为拖拽手柄305(示为305a、305b、305c、305d)提供并显示在产品设计模板301的被选图像容器302上的有效控制件。在该例示性实施例中，由小的方框指示的拖拽手柄305位于被选图像容器302的角部上。如果用户在一个拖拽手柄305上点击并移动鼠标来拖拽光标303，则图像容器302改变大小，同时维持原始容器的纵横比。众所周知，图像的纵横比是图像宽度与图像高度之比。图像容器的纵横比是容器的宽度与高度之比。因此，如果鼠标移动以在朝着图像容器302内部的方向上拖拽光标303，则图像容器302成比例地变小，其中图像容器302的尺寸维持与原始尺寸图像容器302相同的纵横比(即，即使当图像容器302的实际尺寸改变时，图像容器302的高宽比也是恒定的)。相反，如果鼠标移动以在远离图像容器302内部的方向上拖拽光标303，则图像容器302成比例地变大，其中图像容器302的尺寸维持与原始尺寸图像容器302相同的纵横比。

重要的是，图像容器302的图像内容也维持与原始尺寸图像容器302的图像内容相同的纵横比。因此，如果图像容器302变大，则所显示的图像容器302是与原始图像容器302相同的内容，但成比例放大了，使得它填满变大的图像容器302。应当指出，因为基本图像只包括固定个数的像素，所以当图像容器在放置与缩放模式中缩放到较大的尺寸时，所显示图像内容的分辨率将减小。当图像容器302缩放到较小的尺寸时反之成立，尽管所显示图像内容的分辨率具有限于用户显示屏幕分辨率和所关联的用户监视器的图形设置的上界。然而，当打印产品设计模板时，分辨率有基本图像分辨率的上界。

现在参照图8，在这个例子中，用户已经点击了拖拽手柄305a，并已经移动鼠标以在朝着图像容器302内部的方向上拖拽光标303。当释放鼠标点击时，图像容器302的尺寸就固定到由302a所指示的大小。因此，图像容器302和关联的图像内容已经重新缩放到较小的成比例大小，如由302a所指示的。应当指出，维持了容器尺寸和图像内容两者的纵横比。因此，图像容器302的高宽比与修改后图像容器302a的高宽比相同。还应当指出，尽管在该例示性实施例中，拖拽手柄305是在图像容器302的角部上实现并显示的，但是在可选实施例中，它们也可以可选地或者附加地沿图像容器302的周边的任何点实现并显示。例如，尽管没有示出，但拖拽手柄可以在每个图像容器边界部分的每组两个相邻角部之间的中点上实现并显示。因此，如果用户在只连接到一个边界(例如，仅图像容器302的水平或垂直边界中的一个)的手柄305上拖拽，则缩放工具352自动地调整相邻的边界(例如，如果被选手柄连接到水平边界，则调整垂直边界，而如果被选手柄连接到垂直边界，则调整水平边界)，以维持恒定的纵横比。

可以理解，在缩放图像容器302及其关联的图像内容时，图像容器302的一个点必须固定或者“锚定”，从这个点开始允许图像容器(和关联的图像内容)中所有其它点的相对扩展或压缩。在该例示性实施例中，锚定点被选择成被选拖拽手柄305的相对角部。然而，应当理解，在实践当中，图像容器的任何点(或者沿周边或者在内部)都可以充当锚定点，而且要依靠图像编辑器工具的设计者来选择并实现锚定协议和/或允许用户选择锚定点。为了本发明描述的简化，在此所述实施例中的图像容器的锚定点被选择成图像容器302的与被选拖拽手柄相对设置的角部。

在图8所示的例子中，图像容器302缩放到较小的尺寸(示为302a)。应当指出，因为缩放操作不改变基本图像，所以显示在图像窗格410中的基本图像的缩略图图像在缩放操作后保持不变。为了将图像容器302缩放到较大的尺寸，执行类似的技术，但手柄远离图像容器302的内部拖拽。更具体而言，用户通过点击鼠标来选择拖拽手柄305a、305b、305c、305d中的一个，并在远离图像容器302内部的方向上移动光标303直到期望的尺寸，然后释放鼠标点击以将图像容器302的尺寸固定到该期望的尺寸。类似的缩放操作可以利用对任何一个拖拽手柄305的选择伴以标准的拖放动作来执行。

现在转向对放置工具351的讨论，放置工具351允许用户修改被选图像容器302在产品设计模板中的放置。参照图9，放置工具351是有效控制件，其中图像容器302(示为重新缩放后的图像容器302a)的放置可以通过在被选图像容器的内部单击、移动鼠标以便将容器拖拽到期望的可选位置并释放鼠标点击来修改。例如，如图9所例示的，图像容器302已经从示为302a的原始位置移动到示为302b的不同位置。应当指出，因为放置操作不改变基本图像，所以图像窗格410中所显示的基本图像的缩略图图像在放置操作后也保持不变。

在一种实施例中，图像容器302可以移动到产品设计模板301的边界之内的任何位置。在可选实施例中，图像容器可以移动到产品设备模板301的边界之内或者部分在外面的任何位置；然而，图像容器的任何位于产品设计模板301的边界外面的部分的图像内容在产品设计最终完成(例如，打印或发布)时将不会出现在实际的产品中。

现在转向对图像编辑器工具400的裁剪与放大模式的讨论，图10例示了在选择按钮422时的图像编辑器工具400。如图所示，当用户选择裁剪和放大工具按钮432时，图像编辑器工具400同样包括显示当前与被选图像容器302相关联的基本图像411的图像窗格410以及覆盖图像窗格410的裁剪窗口412。裁剪窗口412的边界定义了基本图像411显示在产品设计模板301中被选图像容器302中的部分。如之前所讨论的，产品设计模板301的设计者可以预先裁剪基本图像411，在这种情况下，裁剪窗口412将只围定基本图像的一部分，如图10所例示的。可选地，整个基本图像可以在模板中使用，在这种情况下，裁剪窗口412将围定整个基本图像。图像编辑器工具400还包括放大工具354，该放大工具允许用户修改被选图像容器302中图像内容的放大水平，下面将对其更具体地进行讨论。

现在转向对裁剪工具353的讨论，裁剪工具353包括允许用户改造图像窗格410或产品设计模板301中裁剪窗口412的尺寸的有效控制件。由于利用图像窗格410中裁剪工具的有效控制件对裁剪窗口412进行改变而造成的对产品设计模板301中图像容器302的大小的影响是用户可以自动看见的。反之，由于利用裁剪工具的有效控制件对产品设计模板301中图像容器302进行改变而造成的对图像窗格410中裁剪窗口412的大小的影响也是用户可以自动看见的。

在一种实施例中，产品设计模板301中裁剪工具的有效控制件包括拖拽手柄315，其示出为连接到图像容器302的每个边界的315a、315b、315c、315d、315e、315f、315g、315h。在该例示性实施例中，由小圆圈指示的拖拽手柄305被放到图像容器302的边界部分的角部和中点上。应当理解，拖拽手柄315的个数与位置可以与所例示的个数与位置不同。

裁剪工具拖拽手柄315允许用户修改图像容器302的形状与大小，并由此自动改变图像窗格中所显示的裁剪窗口412的对应形状与大小。提供拖拽手柄315是允许用户拖放产品设计模板301中所显示的被选图像容器302的边界(导致图像窗格410中所显示的裁剪窗口412的形状与大小的对应修改)。只连接到一个边界部分的拖拽手柄(例如，连接到被选图像容器302的中点的拖拽手柄315e、315f、315g、315h)可以只用于拖放它们所连接到的边界。连接到两个不同边界部分的拖拽手柄(例如，连接到被选图像容器302的角部的拖拽手柄315a、315b、315c、315d)同时拖放两个连接的边界。

在裁剪工具353中，当移动边界部分以修改图像容器302的大小和形状时，图像容器302中所显示的图像内容被对应地更新，以便显示如图像窗格410中所示由新大小和形状的裁剪窗口412所界定的基本图像411的部分。在一种实施例中，尽管没有示出，但是为了提供对基本图像411的哪部分413对应于产品设计模板301的被选图像容器302中所显示的图像内容的更清楚的视觉指示，基本图像411可以以图像色调的阴影版本显示，以便渲染基本图像411的被裁剪窗口412围定的部分413。重要的是，就缩放或放大倍数而言，利用裁剪工具对裁剪窗口412的大小与形状的改变不会导致对图像容器302的图像内容的任何改变。

现在转向对裁剪工具的示例应用，图11A示出了用户已经选择位于被选图像容器302(示为302b)的顶部水平边界部分的中点处的拖拽手柄315e并将该手柄315e通过鼠标拖拽到所示位置从而导致图像容器302具有所示的大小和形状(由302c指示)之后的产品设计画面。如所例示的，容器302b中所显示的图像内容的顶部部分在结果图像容器302c中被裁剪掉了，但图像内容的缩放与放大倍数保持相同。还应当指出，图像窗格410中的裁剪窗口412被更新，以反映图像容器302的尺寸的变化，并维持与修改后图像容器302c相同的纵横比。基本图像411被更新后的裁剪窗口412捕捉的部分对应于修改后的图像容器302c中所显示的图像内容。

继续这个例子，图11B示出了用户已经选择位于被选图像容器302(示为302c)的底部水平边界部分的中点处的拖拽手柄315g并将该手柄315g通过鼠标拖拽到所示位置从而导致图像容器302具有所示的大小和形状(由302d指示)之后的产品设计画面。如所例示的，容器302c中所显示的图像内容的底部部分在结果图像容器302d中被裁剪掉了，但是，同样，图像内容的缩放与放大倍数保持相同。同样，图像窗格410中的裁剪窗口412被更新，以反映图像容器302的尺寸的变化，并维持与修改后的图像容器302d相同的纵横比。基本图像411被更新后的裁剪窗口412捕捉的部分对应于修改后的图像容器302d中所显示的图像内容。

在图11C中，图像被进一步裁剪，这次是通过将图像容器302d的右垂直边界部分上的手柄315f向左拖拽来进行的，从而导致图像容器302具有所示的大小和形状(由302e指示)。同样，即使当容器302e中所显示的图像内容的右边部分被裁剪掉了，图像内容的缩放和放大倍数也保持相同。同样，图像窗格410中的裁剪窗口412被更新，以反映图像容器302的尺寸的变化，并维持与修改后的图像容器302e相同的纵横比。基本图像411被更新后的裁剪窗口412捕捉的部分对应于修改后的图像容器302e中所显示的图像内容。

图像容器302的左垂直边界部分上的手柄315h类似地操作并可以向右或向左拖拽，以便根据期望将左垂直边界部分向右或向左移动。应当理解，垂直边界部分可以利用连接到其的手柄而右移或左移，而水平边界可以利用连接到其的手柄而上移或下移。剩余的角部手柄315a、315b、315c、315d各自连接到一个水平拖拽手柄和一个垂直拖拽手柄两者。当这些手柄被选择并拖拽时，所连接的水平和垂直边界部分同时移出或移入。

裁剪工具353还包括图像窗格410中允许用户从图像窗格410修改裁剪窗口412的位置和尺寸的有效控制件。在这点上，该有效控制件可以包括裁剪窗口放置控制件，例如通过在图像窗格410中的裁剪窗口412内点击来激活以便选择裁剪窗口，然后根据标准的拖放操作来操作以便允许用户在图像窗格410中所显示的基本图像411上挑选并移动裁剪窗口412的位置。例如，图12例示了用户在从图11C所示的位置对裁剪窗口412执行拖放操作之后的裁剪窗口412的位置(示为412a)。

尽管没有示出，但图像窗格410中的裁剪工具有效控制件还可以包括连接到图像窗格410中的裁剪窗口412的拖拽手柄，该手柄允许用户拖放裁剪窗口412的边界，以便从图像窗格410修改裁剪窗口412的大小和形状。这个操作将类似于产品设计模板301中裁剪工具的有效控制件来操作，但是在图像窗格410中有效的，并且是与裁剪窗口412而不是与图像容器302相关联。

在一种实施例中，当裁剪窗口412在拖放操作中利用图像窗格410中的有效放置控制件被重新放置时，裁剪窗口412的边界被限定到基本图像411的外边界。因此，如果裁剪窗口412被拖拽，使得其一个边缘到达下面的基本图像411的外边界，则它不能被拖拽通过该边缘。

在一种实施例中，当裁剪窗口412利用产品设计模板301中图像容器302上的有效放置控制件来调整形状时(通过选择图像容器302上的一个边界并执行拖放操作，使得所得修改后的裁剪窗口的边缘到达图像窗格410中基本图像411的边缘)，裁剪窗口的边缘被限定到基本图像411的边缘，且图像容器302的对应被选边界不能进一步扩展。如果同时选择并拖拽多于一个边界，则当对应裁剪窗口412的第一边界到达图像窗格410中基本图像411的边缘时，裁剪工具353可以将裁剪窗口412的第一边界限定到该边缘，但允许剩余边界的进一步扩展，直到剩余边界到达基本图像411的另一个边缘。作为例子，图13例示了，当图像编辑器工具400处于裁剪与放大模式时，通过对图像容器302上的角部手柄控制件315b的选择而对裁剪窗口的扩展(从412a到412c)。如所例示的，当图像容器302向外扩展时，图像窗格410中所得裁剪窗口412a接近基本图像411的左边缘。当所得裁剪窗口412到达左边缘(当图像容器在302f处指示时，该左边缘指示为412b)并且光标运动继续向外拖拽时，裁剪窗口412停靠基本图像411的左边缘(当图像容器在302g处指示时，该左边缘指示为412c)，但允许顶部水平边界继续向上扩展，直到它到达基本图像411的上边缘，在那里阻止进一步的向上扩展。

图14A例示了当用户选择图像编辑器工具400中的放大工具354时的定制页面300。在所示的实施例中，放大工具354实现为滑块431，该滑块可以沿滑轨432被拖拽到任何位置，以改变在裁剪窗口412中以及同时在产品设计模板301中所显示的被选图像容器302中的图像内容的放大倍数。滑块431沿滑轨432的位置指示并确定被选图像容器302中的图像内容的放大程度。在一种实施例中，放大倍数的范围从完全负裁剪(full negative cropping)到100点/英寸(DPI)的最大放大倍数。

图14A例示了完全负裁剪，其中滑块431位于滑轨432的最左端。完全负裁剪在当基本图像411缩放成适合图像容器302的时候发生，因此，除非基本图像411的尺寸具有与图像容器302的尺寸相同的纵横比，否则图像容器302的没有被图像411填充的部分将用透明覆盖物313填充。当然，图像容器302(指示为302h)最有可能的是没有与图像窗格410相同的纵横比，因此透明覆盖物313将没有与图像窗格410中所显示的透明覆盖物413相同的纵横比。

图14B例示了某个放大倍数，其中滑块431放到滑轨432最左边点和最右边点之间，而图14C例示了最大放大倍数，其中滑块431放到滑轨432的最右端。应当理解，可用放大倍数的范围是图像411的像素密度的函数。

图14B显示滑块431已经从如图14A所例示的其对应于完全负裁剪(即，缩放成适合图像容器)的滑轨432上最左端的原始位置(在434a指示)被拖拽到在434b所指示的位置。当滑块431沿滑轨432被拖拽时，放大工具354通过如下来作出响应：自动将图像窗格410中裁剪窗口412调整到较小的尺寸(优选地与滑块431沿滑轨432的位置成比例)，同时维持图像容器302中图像内容的中央点并维持裁剪窗口412和对应的图像容器302的纵横比。由于在放大工具354的使用过程中图像容器302本身并不改变大小或尺寸，因此在裁剪窗口412的边界内捕捉到的图像内容自动重新缩放并显示在被选的图像容器302中，同时维持裁剪窗口412和图像容器302的纵横比。这些动作是在检测到指示放大倍数改变的用户输入时由图像编辑工具400自动执行的。即，当检测到用户期望改变放大倍数(通过检测用户对滑块431的拖拽操作)时，系统自动确定对应于滑块431的更新后位置的放大程度、确定实现该放大程度所需的对应分辨率、确定维持裁剪窗口412与图像容器302的纵横比所需的与所确定的分辨率相对应的裁剪窗口412的尺寸、根据所确定的尺寸显示裁剪窗口412并以所选分辨率在图像容器302中显示被调整后的裁剪窗口412捕捉的图像内容。用脚本编写的放大工具354的一种典型实施例在附录A中给出。

因此，在图14B中，如所例示的，由于从位置434a到位置434b拖拽滑块431而导致的放大倍数的期望变化导致裁剪窗口412自动调整到对应的较小尺寸。应当指出，在放大倍数改变之后，这个例子中的当前分辨率显示为从原始的2000DPI下降到612DPI。还应当指出，在以这种方式放大图像的一小部分时，基本图像411的更小细节可以将被放大，以变得用户更可见。例如，在图14B中，被选图像容器302g(在图14A中示为302f)的图像内容被放大，以便展示在先前放大水平下用户可能看不到的更多细节。

图14C例示了当滑块尽可能移动到右边(在滑轨432上的位置434c所示)以便进一步增加被选图像容器302g的图像内容的放大倍数时的图像容器302(示为302k)。在这个例子中，容器302g中可以看到的附加放大可以展示基本图像411的被选部分中的更多细节。

图14D例示了由于滑块431沿滑轨432从较高放大水平到较低放大水平的位置变化而造成的裁剪窗口412的变化。在这个例子中，裁剪窗口412以初始大小(指示为412a)开始并扩展，同时维持其纵横比，直到裁剪窗口412的一个边界到达基本图像411的边界(例如，在412b指示出的裁剪窗口的右边界)。一旦这种情况发生，裁剪窗口412就随放大倍数减小(作为滑块431向左移动的结果)而继续扩展，但裁剪窗口412的边界不允许扩展过基本图像411的对应边界。因此，当滑块431进一步向左移动时，裁剪窗口412的右边界保持在图像的右边界，但剩余边界还允许继续扩展。当底部边界到达基本图像的底部边界(在412c处指示)时，裁剪窗口412的底部边界保持在基本图像411的底部边界，而裁剪窗口剩余的左和顶部边界继续扩展(在412d处指示)。裁剪工具353的边缘限制特征具有在正与负裁剪之间提供无缝集成的附加好处。用脚本编写的这种无缝裁剪工具354的一种典型实施例在附录C中给出。

数字成像技术领域的技术人员应当理解，由放大工具354提供的放大技术必须相对由于放大导致的分辨率下降来平衡。即，因为基本图像411是由多个离散的像素组成的，所以当裁剪窗口412变小以便选择基本图像411的整体有限数量中的更少量的像素时，这些更少数量的被选像素被缩放成适合放在未改变的图像容器302的尺寸中，使得被选像素的内容对于用户来说更可见。然而，因为选择了更少的实际像素，所以当放大倍数增加时，实际图像内容减少了。

为此，图像编辑器工具400可以包括分辨率指示器450，该指示器450监视被选图像容器302的当前分辨率，并且如果当前分辨率降到低于预定的最小阈值则向用户生成警告。对于其产品设计要用在需要图像内容具有某个最小分辨率或者当图像内容具有某个最小分辨率时仅仅是看起来更好的应用中的用户来说，这可能是重要的。例如，如果最终完成的产品要打印，则通常认为打印材料具有大约300DPI的最小分辨率看起来更好。因此，在一种实施例中，分辨率指示器450可以在最低期望DPI的75％(即，在225DPI)处生成警告。某些打印机可能不允许分辨率低于这个水平，因此，如果为用户提供当前分辨率低于给定阈值的指示器，则可以为用户提供增加放大倍数以便在最终完成的产品中阻止这种问题的机会。

在裁剪工具353和放大工具354中，图像编辑器工具400可以为用户提供允许调整裁剪窗口412在下面的基本图像411上的放置而不改变图像容器的放置或者大小与尺寸的附加灵活性。在图15A和15B所例示的实施例中，图像编辑器工具400允许用户点击产品设计模板301中被选图像容器302中的图像内容，然后在期望的方向上拖拽光标303，以便在光标方向上拉动图像内容。因此，在图15A中，用户点击图像容器302中的图像内容并将光标303从位置303a拖到位置303b，如图15A中所指示的，从而导致图像内容调整到如图15B中所示。在这种操作中，对用户来说，看起来就好像用户真正地在图像容器302下四处“滑动”下面的基本图像411，直到图像的期望部分出现在图像容器302中。然而，在实现中，裁剪工具353响应在图像容器302的边界内的用户光标运动，以调整图像编辑器工具400的图像窗格410中裁剪窗口412在基本图像411上的位置。因此，当在图像容器302中拖拽图像内容以便拖拽图像容器302中图像的放置时，用户可以同时看到裁剪窗口412位置的变化。用脚本编写的这种裁剪窗口放置工具的一种典型实施例在附录C中给出。

为了获得相同的结果，如图16中所例示的，用户可以可选地选择图像窗格410中的裁剪窗口412，并根据期望拖放它，以便将裁剪窗口412放到期望的图像内容上。因此，如图16所示，用户已经选择了裁剪窗口412(指示为412f)并拖到另一个位置(指示为412g)，且图像容器302的内容也对应地更新了。

在图15A/15B和图16所示的任何一种操作中，结果都同时在产品设计模板301和图像窗格410中被更新。还应当理解，尽管执行图15A/15B的在图像容器302内拖放图像内容和执行图16的在图像窗格410中的基本图像411上拖放裁剪窗口412产生相同的结果，但它们分别向用户提供不同的好处。图15A/15B所例示的操作从产品设计环境为用户提供图像放置调整，而图16所例示的操作从图像环境为用户提供相同的调整。

图17例示了用于方便对电子设计中图像容器的图像内容进行用户定制的计算机实现方法的一种实施例。在执行该方法时，计算机执行程序代码，该程序代码包含在一种或多种计算机可读介质上并且指示计算机执行方法500的各个步骤。现在转向该方法的步骤，计算机执行如下步骤：在用户计算机的屏幕上显示具有至少一个图像容器的电子设计，其中该至少一个图像容器具有与其相关联的对应基本图像(步骤502)；确定基本图像的要显示在图像容器中的一部分(步骤504)；在图像容器中显示基本图像的识别出的部分(步骤506)；从所述电子设计接收对要进行定制的图像容器的用户选择(步骤508)；以及与所述电子设计同时地向用户显示图像窗格，该图像窗格显示了与被选图像容器相关联的整个基本图像(步骤510)，由此允许用户在电子设计的环境下同时观看与被选图像容器相关联的基本图像和出现在所述电子设计中的基本图像的所述部分。

计算机还可以执行更多步骤：显示围定基本图像的显示在被选图像容器中的部分的裁剪窗口(步骤512)；显示至少一个允许修改基本图像或者其一部分如何呈现在电子设计中的有效控制件(步骤514)；通过至少一个有效控制件接收用户修改(步骤516)；以及，当利用至少一个有效控制件进行修改时，利用对基本图像或者其一部分的外观的修改来同时更新产品设计和裁剪窗口的显示(步骤518)，优选地将裁剪窗口的位置和边界限定在基本图像的边界之内(步骤520)。

尽管已经讨论了例示性实施例，但也可以采用另选实施例。例如，尽管已经在基于网络的情况下描述了本发明，但本发明并不限于此。因此，所述实施例应当被认为是例示性的而不是约束性的，而且本发明的范围如在以下权利要求和所有等效方法与系统中所指示的。

附录A

//当保持中点时放大//

//从新的滑块值(宽度)得到缩放百分比

   var zoomPercentDelta＝(newWidth/my.zoomStartRect.width)-1；

//新尺寸+位置

var mainImage＝{}；

//计算新尺寸

//-＞给维度加侧增量

   mainImage.width＝my.zoomStartRect.width+zoomPercentDelta*

my.zoomStartRect.width；

   mainImage.height＝my.zoomStartRect.height+zoomPercentDelta*

my.zoomStartRect.height；

//计算新位置

//-＞保持图像的中点！

var mainCropArea＝vp.ui.getLocalRect(my.mainCropArea)；//container

//中心％＝容器的中点在整个图像中的位置

//      ＝到容器中心的图像距离/整个图像的尺寸

//      ＝(裁剪区域尺寸/2-图像偏移量)/整个图像的尺寸

   var heightCenterPercent＝((mainCropArea.height/2)-my.zoomStartRect.top)/

my.zoomStartRect.height；

   var widthCentcrPercent＝((mainCropArea.width/2)-my.zoomStartRect.left)/

my.zoomStartRect.width；

//计算新位置，保持中心％恒定

   mainImage.top＝(mainCropArea.height/2)-(mainImage.height*

heightCenterPercent)；

   mainImage.left＝(mainCropArea.width/2)-(mainImage.width*

widthCenterPercent)；

附录B

//当停靠边缘时放大(用于到负裁剪的平滑过渡)//

  var mainArea＝vp.ui.getLocalRect(my.mainCropArea)；//image container(is thecrop area)

  var mainImage＝vp，ui.getLocalRcct(my.mainCropImage)；//full image(isbounding box for crop area)

//边界检查  垂直

if(mainImage.top＞0)

{

  mainImage.top＝0；

}

else if(mainImage.bottom＜mainArea.height)

{

  mainImage.top＝mainArea.height-mainImage.height；

}

//边界检查水平

if(mainImage.left＞0)

{

  mainImage.left＝0；

}

else if(mainImage.right＜mainArea.width)

{

  mainImage.left＝mainArea.width-mainImage.width；

}

//负裁剪中心

//维持不变

//如果在一个维度负裁剪，则：

//-图像在该维度居中

//-其它维度在一侧决没有空白

if(mainImage.width＜mainAea.width)

{

  mainImage.left＝(mainArea.width-mainImage.width)/2；

}

if(mainImage.height＜mainArea.height)

{

  mainImage.top＝(mainArea.height-mainImage.height)/2；

}

附录C

//调整裁剪容器的边框到图像的实际的有可能隐藏位置

//找到当前图像+容器

    var mainArea＝vp.ui.getLocalRect(my.mainCropArea)；//image container(is thecrop area)

    var mainImage＝vp.ui.getLocalRect(my.mainCropImage)；//full image(isbounding box for crop arca)

//利用容器使图像坐标称为绝对值

mainImage.top＝mainImage.top+mainArea.top；

mainImage.left＝mainImage.left+mainArea.left；

//处理负裁剪

//不变的：如果在一个维度负裁剪，则图像在该维度居中

if(mainImage.width＜mainArea.width)

{

    //约束调整尺寸-这是最大缩放

    mainImage.left＝mainArea.left；

    mainImage.width＝mainArea.width；

}

if(mainImage.height＜mainArea.height)

{

  //约束调整尺寸-这是最大缩放

  mainImage.top＝mainArea.top；

  mainImage.height＝mainArea.height；

}

my.mainCropManipulator.setBoundingBox(mainImage)；