CN107221018B - 一种智能画板画面合成方法 - Google Patents

一种智能画板画面合成方法 Download PDF

Info

Publication number
CN107221018B
CN107221018B CN201710245820.0A CN201710245820A CN107221018B CN 107221018 B CN107221018 B CN 107221018B CN 201710245820 A CN201710245820 A CN 201710245820A CN 107221018 B CN107221018 B CN 107221018B
Authority
CN
China
Prior art keywords
point
view layer
picture
coordinate
drawing board
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.)
Active
Application number
CN201710245820.0A
Other languages
English (en)
Other versions
CN107221018A (zh
Inventor
林有路
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hongcheng Technology Development Co ltd
Original Assignee
Hongcheng Technology Development Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Hongcheng Technology Development Co ltd filed Critical Hongcheng Technology Development Co ltd
Priority to CN201710245820.0A priority Critical patent/CN107221018B/zh
Publication of CN107221018A publication Critical patent/CN107221018A/zh
Application granted granted Critical
Publication of CN107221018B publication Critical patent/CN107221018B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles
    • G06T11/203—Drawing of straight lines or curves
    • 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
    • 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
    • G06F3/04883—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 for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text

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)
  • Processing Or Creating Images (AREA)

Abstract

本发明属于绘图技术领域，具体涉及一种智能画板的画面合成方法；1）创建智能画板层级结构，所述智能画板层级结构从下到上依次为画板视图层、背景图层、合成视图层和绘画视图层；2）使用贝赛尔路径记录在绘画视图层上绘画的路径，由路径生成图片，并将图片显示在绘画视图层上；3）绘图完成后，将绘画视图层上的图片传递到合成视图层上缓存，绘画视图层消除其上的贝赛尔路径记录，恢复初始状态；4）将合成视图层上缓存的图片与背景图层上的图片合成并在绘画视图层上生成图片相册。本发明提出一种智能画板画面合成方法；能够使得绘制的图片没有明显的边角，曲线比较圆滑。

Description

一种智能画板画面合成方法
技术领域
本发明属于绘图技术领域，具体涉及一种智能画板的画面合成方法。
背景技术
画板是用来绘图的工具，当前市面上的画板应用的可扩展性低，功能单一，并且存在以下问题：1.曲线不够圆滑；2.CPU占用高；3.缺少一项或多项功能（撤销、重做、橡皮擦、录制脚本）的功能；4.只支撑单人涂鸦；5.多人绘制时，显示端无法展示时快时慢的真实绘画感。
因此，有必要研究一种智能画板画面合成方法，提升画图时的性能，增加简单的功能。
发明内容
为了克服背景技术中存在的不足，本发明提出一种智能画板画面合成方法；能够将多次绘画的视图合并在绘画视图层上。
为了达到上述目的，本发明通过如下技术方案实现的：
一种智能画板画面合成方法，包括以下步骤：
1）创建智能画板层级结构，所述智能画板层级结构从下到上依次为画板视图层、背景图层、合成视图层和绘画视图层；
2）使用贝赛尔路径记录在绘画视图层上绘画的路径，由路径生成图片，并将图片显示在绘画视图层上；
3）绘图完成后，将绘画视图层上的图片传递到合成视图层上缓存，绘画视图层消除其上的贝赛尔路径记录，恢复初始状态；
4）将合成视图层上缓存的图片与背景图层上的图片合成并在绘画视图层上生成图片相册。
进一步，在步骤2）中，绘画视图层恢复初始状态后，再次记录二次绘画的贝赛尔路径并二次生成图片，将二次生成的图片传递到合成视图层上缓存，绘画视图层消除其上的贝赛尔路径记录，再次恢复初始状态。
进一步，所述的贝赛尔路径记录绘画的路径包括以下具体步骤：
1）绘画视图层采集用户的滑动轨迹坐标点；
2）当采集到第5个点时，重新设置第4个点的值：第4个点的x坐标设置为第3个点的x坐标和第5个点的x坐标的平均值，第4个点的y坐标设置为3个点的y坐标和第5个点的y坐标的平均值；
3）以第1点为起点，第4点为终点，第2点和第3点为控制点，绘制二次贝塞尔曲线；
4）设置下次处理的第1点的坐标为本次的第5点的坐标，采集数加1；
5）重复第2步，直至处理完全部坐标点。
进一步，所述绘画视图层上生成图片相册后，画板生成脚本，脚本使用数组记录用户的绘制操作过程，绘制操作过程包括点击、移动、结束、保存和播放操作；点击操作时，脚本记录此时的坐标点、时间点、画笔的颜色、线宽和形状；移动操作时，脚本记录移动的坐标点和时间点；结束操作时，脚本记录此时的坐标点和时间点；完成操作时，脚本将数据打包存储在脚本数组中；保存操作时，将脚本数组归档至文件中。
进一步，背景图层用来显示背景图片。
与现有技术相比，本发明至少具有以下有益效果之一：
1.本方法绘制的图片较现有绘图方法绘制的图片没有明显的边角，曲线较圆润；
2.本发明使用时CPU占用较低，频繁和大量绘制时，CPU占用低于10%；
3.本方法功能较多，能够进行撤销、重做、橡皮擦和录制脚本的功能；
4.本发明支持多人涂鸦，并且多人绘制时，能够展示时快时慢的真实绘画感。
具体实施方式
为了使本发明的目的、技术方案和有益效果更加清楚，下面将结合附图，对本发明的优选实施例进行详细的说明，以方便技术人员理解。
实施例1
一种智能画板画面合成方法，包括以下步骤：
1）创建智能画板层级结构，所述智能画板层级结构从下到上依次为画板视图层、背景图层、合成视图层和绘画视图层，背景图层用来显示背景图片。
2）使用贝赛尔路径记录在绘画视图层上绘画的路径，由路径生成图片，并将图片显示在绘画视图层上；
3）绘图完成后，将绘画视图层上的图片传递到合成视图层上缓存，绘画视图层消除其上的贝赛尔路径记录，恢复初始状态；
4）将合成视图层上缓存的图片与背景图层上的图片合成并在绘画视图层上生成图片相册。
在绘制图片时，绘图者在绘画视图层上进行画图，贝赛尔路径记录在绘画视图层上绘画的路径，由路径生成图片，然后绘画视图层上的图片传递到合成视图层上缓存，将在合成视图层上缓存的照片和背景图层上的图片合成并在绘画视图层上生成图片相册。
实施例2
在实施例1的基础上进行优化，在步骤2）中，绘画视图层恢复初始状态后，再次记录二次绘画的贝赛尔路径并二次生成图片，将二次生成的图片传递到合成视图层上缓存，绘画视图层消除其上的贝赛尔路径记录，再次恢复初始状态。
在进行绘图过程中，绘图者在绘画视图层上进行画图，贝赛尔路径记录在绘画视图层上绘画的路径，由路径生成图片，并将图片传递到合成视图层上缓存，绘画视图层消除其上的贝赛尔路径记录，恢复初始状态，绘画视图层恢复初始状态后，再次记录二次绘画的贝赛尔路径并二次生成图片，将二次生成的图片传递到合成视图层上缓存，将两次在合成视图层上缓存的照片和背景图层上的图片合成并在绘画视图层上生成图片相册。
实施例3
在实施例2的基础上进行优化，所述的贝赛尔路径记录绘画的路径包括以下具体步骤：
1）绘画视图层采集用户的滑动轨迹坐标点；
2）当采集到第5个点时，重新设置第4个点的值：第4个点的x坐标设置为第3个点的x坐标和第5个点的x坐标的平均值，第4个点的y坐标设置为3个点的y坐标和第5个点的y坐标的平均值；
3）以第1点为起点，第4点为终点，第2点和第3点为控制点，绘制二次贝塞尔曲线；
4）设置下次处理的第1点的坐标为本次的第5点的坐标，采集数加1；
5）重复第2步，直至处理完全部坐标点。
贝赛尔曲线绘制能够使得绘制的图片没有明显的边角，曲线较圆润；并且多人绘制时，能够展示时快时慢的真实绘画感。
实施例4
在实施例2的基础上进行优化，所述绘画视图层上生成图片相册后，画板生成脚本，脚本使用数组记录用户的绘制操作过程，绘制操作过程包括点击、移动、结束、保存和播放操作；点击操作时，脚本记录此时的坐标点、时间点、画笔的颜色、线宽和形状；移动操作时，脚本记录移动的坐标点和时间点；结束操作时，脚本记录此时的坐标点和时间点；完成操作时，脚本将数据打包存储在脚本数组中；保存操作时，将脚本数组归档至文件中。
本方法绘制的图片较现有绘图方法绘制的图片没有明显的边角，曲线较圆润；本发明使用时CPU占用较低，频繁和大量绘制时，CPU占用低于10%；本方法功能较多，能够进行撤销、重做、橡皮擦和录制脚本的功能；本发明支持多人涂鸦，并且多人绘制时，能够展示时快时慢的真实绘画感。
最后说明的是，以上优选实施例仅用以说明本发明的技术方案而非限制，尽管通过上述优选实施例已经对本发明进行了详细的描述，但本领域技术人员应当理解，可以在形式上和细节上对其作出各种各样的改变，而不偏离本发明权利要求书所限定的范围。

Claims (9)

1.一种智能画板画面合成方法，其特征在于：包括以下步骤：
1)创建智能画板层级结构，所述智能画板层级结构从下到上依次为画板视图层、背景图层、合成视图层和绘画视图层；
2)使用贝赛尔路径记录在绘画视图层上绘画的路径，由路径生成图片，并将图片显示在绘画视图层上；
3)绘图完成后，将绘画视图层上的图片传递到合成视图层上缓存，绘画视图层消除其上的贝赛尔路径记录，恢复初始状态，绘画视图层恢复初始状态后，再次记录二次绘画的贝赛尔路径并二次生成图片，将二次生成的图片传递到合成视图层上缓存，绘画视图层消除其上的贝赛尔路径记录，再次恢复初始状态；
4)将合成视图层上缓存的图片与背景图层上的图片合成并在绘画视图层上生成图片相册。
2.根据权利要求1所述的智能画板画面合成方法，其特征在于：所述的贝赛尔路径记录绘画的路径包括以下具体步骤：
1)绘画视图层采集用户的滑动轨迹坐标点；
2)当采集到第5个点时，重新设置第4个点的值：第4个点的x坐标设置为第3个点的x坐标和第5个点的x坐标的平均值，第4个点的y坐标设置为3个点的y坐标和第5个点的y坐标的平均值；
3)以第1点为起点，第4点为终点，第2点和第3点为控制点，绘制二次贝塞尔曲线；
4)设置下次处理的第1点的坐标为本次的第5点的坐标，采集数加1；
5)重复第2步，直至处理完全部坐标点。
3.根据权利要求1所述的智能画板画面合成方法，其特征在于：所述绘画视图层上生成图片相册后，画板生成脚本，脚本使用数组记录用户的绘制操作过程，绘制操作过程包括点击、移动、结束、保存和播放操作。
4.根据权利要求3所述的智能画板画面合成方法，其特征在于：点击操作时，脚本记录此时的坐标点、时间点、画笔的颜色、线宽和形状。
5.根据权利要求3所述的智能画板画面合成方法，其特征在于：移动操作时，脚本记录移动的坐标点和时间点。
6.根据权利要求3所述的智能画板画面合成方法，其特征在于：结束操作时，脚本记录此时的坐标点和时间点。
7.根据权利要求3所述的智能画板画面合成方法，其特征在于：完成操作时，脚本将数据打包存储在脚本数组中。
8.根据权利要求3所述的智能画板画面合成方法，其特征在于：保存操作时，将脚本数组归档至文件中。
9.根据权利要求3所述的智能画板画面合成方法，其特征在于：播放操作时，播放记录的脚本数据。
CN201710245820.0A 2017-04-14 2017-04-14 一种智能画板画面合成方法 Active CN107221018B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710245820.0A CN107221018B (zh) 2017-04-14 2017-04-14 一种智能画板画面合成方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710245820.0A CN107221018B (zh) 2017-04-14 2017-04-14 一种智能画板画面合成方法

Publications (2)

Publication Number Publication Date
CN107221018A CN107221018A (zh) 2017-09-29
CN107221018B true CN107221018B (zh) 2020-07-17

Family

ID=59927866

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710245820.0A Active CN107221018B (zh) 2017-04-14 2017-04-14 一种智能画板画面合成方法

Country Status (1)

Country Link
CN (1) CN107221018B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108335342B (zh) * 2018-01-31 2022-03-29 杭州网易智企科技有限公司 在web浏览器上进行多人绘画的方法、设备和计算机程序产品
CN117315198B (zh) * 2023-10-09 2024-04-16 中微智创(北京)软件技术有限公司 一种动目标轨迹拐角平缓微调的平滑优化方法和系统

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5974198A (en) * 1996-08-26 1999-10-26 Adobe Systems Incorporated Adjustment layers for composited image manipulation
CN103279279A (zh) * 2013-05-20 2013-09-04 南京恒知讯科技有限公司 一种基于多人协同操作的电子画板系统、数据处理方法及设备
CN103729196A (zh) * 2014-01-22 2014-04-16 南京恒知讯科技有限公司 基于图层的多人绘画的电子画板系统，处理方法及设备
CN103974209A (zh) * 2013-01-29 2014-08-06 华为技术有限公司 视频短信的发送、接收方法及其装置和手持电子设备
CN104468338A (zh) * 2014-12-25 2015-03-25 北京奇虎科技有限公司 即时通讯方法、客户端及终端设备
CN104503694A (zh) * 2014-12-24 2015-04-08 北京奇虎科技有限公司 一种基于绘画数据即时通信的方法、客户端及系统
CN104518941A (zh) * 2013-09-26 2015-04-15 北京新媒传信科技有限公司 实现即时通信多人画板的方法、客户端、服务器及系统

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5974198A (en) * 1996-08-26 1999-10-26 Adobe Systems Incorporated Adjustment layers for composited image manipulation
CN103974209A (zh) * 2013-01-29 2014-08-06 华为技术有限公司 视频短信的发送、接收方法及其装置和手持电子设备
CN103279279A (zh) * 2013-05-20 2013-09-04 南京恒知讯科技有限公司 一种基于多人协同操作的电子画板系统、数据处理方法及设备
CN104518941A (zh) * 2013-09-26 2015-04-15 北京新媒传信科技有限公司 实现即时通信多人画板的方法、客户端、服务器及系统
CN103729196A (zh) * 2014-01-22 2014-04-16 南京恒知讯科技有限公司 基于图层的多人绘画的电子画板系统，处理方法及设备
CN104503694A (zh) * 2014-12-24 2015-04-08 北京奇虎科技有限公司 一种基于绘画数据即时通信的方法、客户端及系统
CN104468338A (zh) * 2014-12-25 2015-03-25 北京奇虎科技有限公司 即时通讯方法、客户端及终端设备

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
基于HTML5的图形图像协同处理技术研究与实现;余飞;《中国优秀硕士学位论文全文数据库 信息科技辑》;20160215(第2期);第I139-192页 *

Also Published As

Publication number Publication date
CN107221018A (zh) 2017-09-29

Similar Documents

Publication Publication Date Title
CN103268166B (zh) 手写输入设备的原笔迹信息采集和显示方法
CN104035703B (zh) 改变视图显示的客户端、方法及系统
CN105900053B (zh) 用于指定链接目的地和用于观看者的界面装置和记录介质
WO2008146630A1 (ja) キャラクター表示装置、キャラクター表示方法、情報記録媒体、ならびに、プログラム
CN100576881C (zh) 一种基于多相滤波技术的自适应视频图像缩放引擎
CN1213366C (zh) 计算机式讲稿记录和复制方法
WO2015180452A1 (zh) 拍摄方法和装置
CN107221018B (zh) 一种智能画板画面合成方法
CN105844683B (zh) 基于Canvas和WebWorker的像素差逐帧动画的实现方法
CN104079926A (zh) 一种远程桌面软件的视频性能测试方法
CN110176079A (zh) 一种基于准共形映射的三维模型变形算法
CN105096249B (zh) 图像处理方法和装置
CN106341724A (zh) 一种表情图像标注的方法和系统
CN104035705B (zh) 切换视图显示模式的客户端、方法及系统
CN1971615A (zh) 一种基于人脸照片的卡通肖像生成方法
CN105045579A (zh) 一种轨迹生成方法和装置
CN109815977B (zh) 大批量制作机器学习样本剪裁标记一体化方法
CN106488324A (zh) 一种视频剪辑方法及系统
CN110737372A (zh) 一种用于电子白板的新增图元操作方法、系统及电子白板
CN109671127A (zh) 一种实现波形绘制的方法及装置
CN109215061A (zh) 一种人脸毛孔跟踪方法及系统
CN110879946A (zh) 手势结合ar特效的方法、存储介质、设备及系统
CN104135666A (zh) 一种屏幕图像的插值存储方法、系统及回放方法
US20180137666A1 (en) Method and system to record, store, transmit and play free hand drawings and handwritings like a movie or animation showing pen movements
CN110827303B (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
CP02 Change in the address of a patent holder

Address after: 408, 4th floor, No.1 Qinglong Hutong, Dongcheng District, Beijing

Patentee after: HONGCHENG TECHNOLOGY DEVELOPMENT Co.,Ltd.

Address before: Room 417, No.10 Xinghuo Road, Science Park, Fengtai District, Beijing

Patentee before: HONGCHENG TECHNOLOGY DEVELOPMENT Co.,Ltd.

CP02 Change in the address of a patent holder