CN110211131A - 一种基于参数化设计的平面设计尺寸自动拓展方法 - Google Patents
一种基于参数化设计的平面设计尺寸自动拓展方法 Download PDFInfo
- Publication number
- CN110211131A CN110211131A CN201910421847.XA CN201910421847A CN110211131A CN 110211131 A CN110211131 A CN 110211131A CN 201910421847 A CN201910421847 A CN 201910421847A CN 110211131 A CN110211131 A CN 110211131A
- Authority
- CN
- China
- Prior art keywords
- grid
- design
- planar design
- attribute value
- design element
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 43
- 230000011218 segmentation Effects 0.000 claims abstract description 25
- 239000004744 fabric Substances 0.000 claims description 6
- 238000001514 detection method Methods 0.000 claims description 3
- 238000005314 correlation function Methods 0.000 claims description 2
- 238000010422 painting Methods 0.000 description 5
- 230000006978 adaptation Effects 0.000 description 3
- 101100328884 Caenorhabditis elegans sqt-3 gene Proteins 0.000 description 2
- 239000000969 carrier Substances 0.000 description 2
- 238000007620 mathematical function Methods 0.000 description 2
- 238000005192 partition Methods 0.000 description 2
- 101100328886 Caenorhabditis elegans col-2 gene Proteins 0.000 description 1
- 101100237842 Xenopus laevis mmp18 gene Proteins 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 230000018109 developmental process Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
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
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T7/00—Image analysis
- G06T7/10—Segmentation; Edge detection
- G06T7/11—Region-based segmentation
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09F—DISPLAYING; ADVERTISING; SIGNS; LABELS OR NAME-PLATES; SEALS
- G09F15/00—Boards, hoardings, pillars, or like structures for notices, placards, posters, or the like
- G09F15/0006—Boards, hoardings, pillars, or like structures for notices, placards, posters, or the like planar structures comprising one or more panels
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Computer Vision & Pattern Recognition (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明涉及平面设计技术领域，尤其涉及一种基于参数化设计的平面设计尺寸自动拓展方法。其技术方案为：一种基于参数化设计的平面设计尺寸自动拓展方法，包括如下步骤：对原平面设计进行布局分割，得到若干格子；确定格子中的各设计元素与格子的边之间的边距；对格子中的各设计元素的各属性值进行关联限定；平面设计的尺寸变化时，自动计算各设计元素的各属性值，完成尺寸自动拓展。本发明提供了一种基于参数化设计的平面设计自动尺寸拓展方法，解决了现有平面设计尺寸拓展方法无法对各设计元素进行同步尺寸拓展的问题。
Description
技术领域
本发明涉及平面设计技术领域，尤其涉及一种基于参数化设计的平面设计尺寸自动拓展方法。
背景技术
近些年来，随着互联网的迅猛发展，人们对平面设计的需求量越来越多。由于现有的平面设计中的各元素均采用绝对定位，则许多设计师面临这样一个问题：每个平台对设计结果的尺寸有不同的要求，设计师需要手动调整主视觉设计，让设计结果符合不同平台的尺寸需求。在支持平台的数量比较多的时候，这个工作非常的耗时。
平面设计是由文字、图片和布局进行创意的组合得到的一种结果。传统的平面设计方法在调整尺寸时候无法进行自动调整，核心原因在于元素(文字、图片、和布局)的尺寸和位置参数的参数值是固定值，描述不了元素的尺寸和位置与平面设计整体画布的关系，也描述不了元素和元素之间尺寸和位置的相对关系。
专利申请号为CN201810236663.1的发明专利公布了一种使原平面设计在新尺寸下自动适配的装置；对于同样的设计基本元素，在不同的显示场景应用时，可以通过所述使原平面设计在新尺寸下自动适配的装置自动进行海报设计尺寸改变，使得海报能够在不改变原有视觉效果的情况下，快速依据尺寸生成适配的设计结果，以适配于各种不同显示尺寸的终端，有效的提高海报尺寸改变设计效率。
但是，上述装置仅能对平面设计的主体布局进行高斯分布方式的尺寸拓展，而无法对平面设计主体布局上的元素进行尺寸拓展。比如，上述装置无法对平面设计附着的文字元素进行关联尺寸拓展，导致上述平面设计的尺寸拓展装置和方法功能性较差。
发明内容
本发明克服了现有技术的不足，提供一种可对各设计元素的各属性值进行同步拓展的基于参数化设计的平面设计自动尺寸拓展方法，解决了现有平面设计尺寸拓展方法无法对各设计元素进行同步尺寸拓展的问题。
为解决上述的技术问题，本发明采用以下技术方案：
一种基于参数化设计的平面设计尺寸自动拓展方法，包括如下步骤：
对原平面设计进行布局分割，得到若干格子；
确定格子中的各设计元素与格子的边之间的边距；
对格子中的各设计元素的各属性值进行关联限定，其中关联限定的方法包括将属性值与格子的边距建立表达式、将两个或以上的属性值之间建立表达式；
平面设计的尺寸变化时，按照设计元素和格子的位置关系、设计元素属性值之间建立的关系，自动计算各设计元素的各属性值，完成平面设计的尺寸拓展。
作为本发明的优选方案，在各设计元素的各属性值自动计算之前，还要进行如下步骤：
根据对格子中的各设计元素的各属性值进行的关联限定，构造属性值的依赖图；
检测依赖图是否有循环依赖，若有则报错直接退出；若没有则跳转到下一步。
作为本发明的优选方案，所述设计元素包括图片和文字，图片的属性值包括图片的高度和宽度，文字的属性值包括文字的字体、字号、字间距和行间距。
作为本发明的优选方案，对格子中的各设计元素的各属性值进行关联限定时，使用的函数为逻辑函数、数学函数、字符串函数、集合函数、颜色函数、文字排版相关函数、工具类函数中的一种或多种。
作为本发明的优选方案，所述布局分割的方法为树形布局分割方法或网格布局分割方法。
作为本发明的优选方案，所述树形布局分割方法为：通过树形延伸的方式将平面设计分割的为若干格子。
作为本发明的优选方案，使用树形布局分割时，不再进行分割的格子称为叶子格子，被分割的格子称为非叶子节点格子；对于非叶子节点格子，以参数splitDirection决定格子的分割方向，splitDirection的参数值为"horizontal"和"vertical"。
作为本发明的优选方案，所述网格布局分割方法为：对平面设计进行网格化分割，得到若干格子。
作为本发明的优选方案，所述边距为绝对值或相对值，绝对值为设计元素边框到格子边的距离的值，相对值为设计元素占格子宽或高的百分比。
作为本发明的优选方案，在使用绝对值表示边距时，边距包括设计元素外框与该设计元素所处格子的上边距、下边距、左边距和右边距的一种或多种。
与现有技术相比，本发明的有益效果是：
1、本发明通过参数化设计，可将平面设计上的元素与平面设计布局建立联系，使得平面设计整体尺寸变化时，各元素的尺寸和位置相应改变，实现了平面设计尺寸自动拓展。平面设计可根据显示载体的尺寸不同而自行调整布局和各元素的尺寸调整，避免了设计师需要根据不同的显示载体重新设计平面设计的尺寸的情况，大大减少了设计师的工作量。本发明可对平面设计布局上的图片和文字等元素的尺寸进行自动拓展，保证了画布、图片、文字等同步缩放的功能。
2、构建属性值之间的依赖图，并检测依赖图是否有循环依赖，避免导致死循环计算。
3、设计元素包括图片和文字，图片的属性值包括图片的高度和宽度，文字的属性值包括文字的字体、字号、字间距、和行间距。因此，在进行自动尺寸拓展时，图片的宽度和高度协调所犯，文字的大小、字间距和行间距等也是同步缩放，保证图片或文字在缩放过程中仍保证原先比例，保证平面设计的画面效果不变。
4、通过逻辑函数、数学函数、字符串函数、集合函数、颜色函数、文字排版相关函数、工具类函数等函数描述设计元素的属性值与边距或设计元素的属性值与设计元素的属性值之间的关系，保证各设计元素的尺寸相关的属性值均能与边距产生关联，保证了各元素能通过缩放。
5、布局分割的方法为树形布局分割方法或网格布局分割方法，从而方便确定元素边框与格子边框之间的边距，并且方便元素与边距之间建立表达式。
6、通过树形延伸的方式将平面设计分割的为若干格子，保证格子与元素之间具有确定关系。
7、通过树形布局分割，方便确定叶子格子和非叶子节点格子，方便利用非叶子节点格子的分割方向的参数来限定元素的属性值。
8、通过网格布局分割方法，可将布局进行网格化分割，保证格子与元素之间具有确定关系。
9、边距为绝对值或相对值，可根据需所述边距为绝对值或相对值，绝对值为设计元素边框到格子边的距离的值，相对值为设计元素占格子宽或高的百分比。要来选择限定边距的方式。
10、使用绝对值表示边距时，边距包括设计元素外框与该设计元素所处格子的上边距、下边距、左边距和右边距的一种或多种，从而使得元素的精确位置得以确定。
具体实施方式
下面对本发明作详细的说明。
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
一种基于参数化设计的平面设计尺寸自动拓展方法，包括如下步骤：
a)对原平面设计进行布局分割，得到若干格子；
b)确定格子中的各设计元素与格子的边之间的边距，其中边距为绝对值或相对值，绝对值为设计元素边框到格子边的距离的值，相对值为设计元素占格子宽或高的百分比；设计元素包括图片和文字；
c)对格子中的各设计元素的各属性值进行关联限定，其中关联限定的方法包括将属性值与格子的边距建立表达式、将两个或以上的属性值之间建立表达式；
d)根据对格子中的各设计元素的各属性值进行的关联限定，构造属性值的之间依赖图；
检测依赖图是否有循环依赖，若有则报错直接退出；若没有则跳转到下一步；
e)平面设计的尺寸变化时，按照设计元素和格子的位置关系，设计元素属性值之间建立的关系，自动计算各设计元素的各属性值，完成平面设计的尺寸拓展。
在步骤a)中，通过布局分割确定图片和文字的基本位置：
我们以树形结构布局为例来描述如何通过布局确定图片和文字的基本位置，树形布局具备如下特点：
1、整个画布通过横向分割或者竖向分割的方式被划分为了若干个网格。不再进行分割的网格称为叶子网格，被分割的网格称为非叶子节点网格。对于非叶子节点网格，都有一个参数splitDirection决定网格的分割方向。该参数值可以是"horizontal"(代表横向分割)和"vertical"(代表竖向分割)。
2、内容(文字、图片元素)只能放置在网格中(无论是叶子节点网格，还是非叶子节点网格，都可以放置内容)。
表1树形布局示例
例如：表1中row1、col1、col3和col4是一个叶子节点网格，row2和col2是非叶子节点网格。c5是直接放在画布(canvas)上的一个元素，c1是放置在网格row1中的一个元素，c2是放置在网格col1中的一个元素。
在步骤b)中，使用边距确定图片和文字在网格中的精确位置：
通过设置文字外框和图片外框到所处网格的边距(上边距、下边距、左边距和右边距)即可确定文字和图片占用空间的大小和位置。
根据这个文字框空间的大小，可以反向计算字号、行间距等影响文字大小和位置的参数值；根据图片框空间的大小，可以反向计算图片显示宽高等影响图片大小和文字的参数值。
在步骤c)中，设计元素的属性值用表达式来表达：
这个表达式支持通过引用其他设计元素的某个属性值来计算当前设计元素某个属性值。这样，通过这个表达式，我们可以描述设计元素之间的关系。当这种关系所涉及的某个设计元素(的属性值)发生变化，其他的元素也随之变化。简而言之，就是构建设计元素之间的关联性。
表2表达式示例
表3函数列表
例如：表1中的海报，我们希望：
它宽度大于高度的时候，row1和row2是竖向分割
它高度大于宽度的时候，row1和row2是横向分割
那么，我们可以设置如下的表达式：
canvas.splitDirection＝IF(canvas.width>canvas.height,"vertical","horizontal")
综上，本发明通过参数化设计，可将平面设计上的元素与平面设计布局建立联系，使得平面设计整体尺寸变化时，各元素的尺寸和位置相应改变，实现了平面设计尺寸自动拓展。平面设计可根据显示载体的尺寸不同而自行调整布局和各元素的尺寸调整，避免了设计师需要根据不同的显示载体重新设计平面设计的尺寸的情况，大大减少了设计师的工作量。本发明可对平面设计布局上的图片和文字等元素的尺寸进行自动拓展，保证了画布、图片、文字等同步缩放的功能。
Claims (10)
1.一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，包括如下步骤：
对原平面设计进行布局分割，得到若干格子；
确定格子中的各设计元素与格子的边之间的边距；
对格子中的各设计元素的各属性值进行关联限定，其中关联限定的方法包括将属性值与格子的边距建立表达式、将两个或以上的属性值之间建立表达式；
平面设计的尺寸变化时，按照设计元素和格子的位置关系、设计元素属性值之间建立的关系，自动计算各设计元素的各属性值，完成平面设计的尺寸拓展。
2.根据权利要求1所述的一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，在各设计元素的各属性值自动计算之前，还要进行如下步骤：
根据对格子中的各设计元素的各属性值进行的关联限定，构造属性值的依赖图；
检测依赖图是否有循环依赖，若有则报错直接退出；若没有则跳转到下一步。
3.根据权利要求1所述的一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，所述设计元素包括图片和文字，图片的属性值包括图片的高度和宽度，文字的属性值包括文字的字体、字号、字间距和行间距。
4.根据权利要求1所述的一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，对格子中的各设计元素的各属性值进行关联限定时，使用的函数为逻辑函数、数学函数、字符串函数、集合函数、颜色函数、文字排版相关函数、工具类函数中的一种或多种。
5.根据权利要求1所述的一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，所述布局分割的方法为树形布局分割方法或网格布局分割方法。
6.根据权利要求5所述的一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，所述树形布局分割方法为：通过树形延伸的方式将平面设计分割的为若干格子。
7.根据权利要求6所述的一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，使用树形布局分割时，不再进行分割的格子称为叶子格子，被分割的格子称为非叶子节点格子；对于非叶子节点格子，以参数splitDirection决定格子的分割方向，splitDirection的参数值为"horizontal"和"vertical"。
8.根据权利要求5所述的一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，所述网格布局分割方法为：对平面设计进行网格化分割，得到若干格子。
9.根据权利要求1～8任意一项所述的一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，所述边距为绝对值或相对值，绝对值为设计元素边框到格子边的距离的值，相对值为设计元素占格子宽或高的百分比。
10.根据权利要求9所述的一种基于参数化设计的平面设计尺寸自动拓展方法，其特征在于，在使用绝对值表示边距时，边距包括设计元素外框与该设计元素所处格子的上边距、下边距、左边距和右边距的一种或多种。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910421847.XA CN110211131A (zh) | 2019-05-21 | 2019-05-21 | 一种基于参数化设计的平面设计尺寸自动拓展方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910421847.XA CN110211131A (zh) | 2019-05-21 | 2019-05-21 | 一种基于参数化设计的平面设计尺寸自动拓展方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110211131A true CN110211131A (zh) | 2019-09-06 |
Family
ID=67787980
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910421847.XA Pending CN110211131A (zh) | 2019-05-21 | 2019-05-21 | 一种基于参数化设计的平面设计尺寸自动拓展方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110211131A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113642059A (zh) * | 2021-08-10 | 2021-11-12 | 稿定（厦门）科技有限公司 | 一种平面设计的尺寸拓展方法及装置 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1677343A (zh) * | 2004-03-31 | 2005-10-05 | 微软公司 | 网格画布 |
| CN106970788A (zh) * | 2017-02-24 | 2017-07-21 | 中国人民解放军海军大连舰艇学院 | 一种基于时态的对象依赖关系发现方法和系统 |
| CN107256259A (zh) * | 2017-06-12 | 2017-10-17 | 广东神马搜索科技有限公司 | 页面显示方法、装置、电子设备以及存储介质 |
| CN108537220A (zh) * | 2018-03-21 | 2018-09-14 | 李荣陆 | 一种使原平面设计在新尺寸下自动适配的装置 |
| CN109658329A (zh) * | 2018-11-30 | 2019-04-19 | 上海沐传工业设计有限公司 | 一种基于网格树形的海报布局设计工具 |
-
2019
- 2019-05-21 CN CN201910421847.XA patent/CN110211131A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1677343A (zh) * | 2004-03-31 | 2005-10-05 | 微软公司 | 网格画布 |
| CN106970788A (zh) * | 2017-02-24 | 2017-07-21 | 中国人民解放军海军大连舰艇学院 | 一种基于时态的对象依赖关系发现方法和系统 |
| CN107256259A (zh) * | 2017-06-12 | 2017-10-17 | 广东神马搜索科技有限公司 | 页面显示方法、装置、电子设备以及存储介质 |
| CN108537220A (zh) * | 2018-03-21 | 2018-09-14 | 李荣陆 | 一种使原平面设计在新尺寸下自动适配的装置 |
| CN109658329A (zh) * | 2018-11-30 | 2019-04-19 | 上海沐传工业设计有限公司 | 一种基于网格树形的海报布局设计工具 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113642059A (zh) * | 2021-08-10 | 2021-11-12 | 稿定（厦门）科技有限公司 | 一种平面设计的尺寸拓展方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8379055B2 (en) | Electronic layout generation based on visual context | |
| CN108255489B (zh) | 前端界面代码生成方法、装置、电子设备及存储介质 | |
| CN103488339B (zh) | 一种个性化汉字数字墨水的生成方法 | |
| CN105787226A (zh) | 四边有限元网格模型的参数化模型重建 | |
| CN110598195A (zh) | 一种装修图纸的自动标注排版方法 | |
| CN102789448A (zh) | 一种电子数据排版方法及装置 | |
| Gunar et al. | Non-linear force-free magnetic dip models of quiescent prominence fine structures | |
| CN110211131A (zh) | 一种基于参数化设计的平面设计尺寸自动拓展方法 | |
| CN104238885B (zh) | 一种适用于多设备内容显示的自动布局以及内容显示的方法及装置 | |
| CN106814933A (zh) | 窗口阴影显示方法及装置 | |
| CN116912435A (zh) | 一种平原水网区河道数据及其dem修正的方法 | |
| CN111209034B (zh) | Tv大屏可视化动态页面配置的方法 | |
| US11887255B2 (en) | Method and system for rendering boundary of map area within game map, and computer-readable storage medium | |
| CN103903289B (zh) | 一种基于分形发生器的随机型沼泽地花纹图案生成方法 | |
| CN101359341B (zh) | 一种基于矢量数据信息量的尺度设置方法 | |
| CN103559344B (zh) | 一种用于激光直接成像的版图预处理方法 | |
| CN112783385A (zh) | 一种环保监测地图点位标识的动态生成方法 | |
| Yarmolenko et al. | Modern geoinformation and communication technologies of economic analysis in ms office 365 | |
| CN110264575A (zh) | 一种电缆三维展示方法 | |
| CN108446263A (zh) | 一种在Excel中进行频率分析同步绘制频率曲线的方法 | |
| Chen et al. | Automatic color modification for web page based on partitional color transfer | |
| CN113096009A (zh) | 一种矢量图形的自动化响应式变换方法 | |
| US20080244394A1 (en) | Display and layout flow of relatively positioned user interface items | |
| CN113813608B (zh) | 一种2d游戏地图缩小的方法及系统 | |
| CN113221493B (zh) | 一种基于异质型fpga布局的时钟合法化方法 |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190906 |