CN113934876B - 一种基于Web的作业批改方法、装置及系统 - Google Patents

一种基于Web的作业批改方法、装置及系统 Download PDF

Info

Publication number
CN113934876B
CN113934876B CN202111565459.2A CN202111565459A CN113934876B CN 113934876 B CN113934876 B CN 113934876B CN 202111565459 A CN202111565459 A CN 202111565459A CN 113934876 B CN113934876 B CN 113934876B
Authority
CN
China
Prior art keywords
canvas
job
content
content object
server
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
CN202111565459.2A
Other languages
English (en)
Other versions
CN113934876A (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.)
Chengdu Techman Software Co Ltd
Original Assignee
Chengdu Techman Software 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 Chengdu Techman Software Co Ltd filed Critical Chengdu Techman Software Co Ltd
Priority to CN202111565459.2A priority Critical patent/CN113934876B/zh
Publication of CN113934876A publication Critical patent/CN113934876A/zh
Application granted granted Critical
Publication of CN113934876B publication Critical patent/CN113934876B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/51—Indexing; Data structures therefor; Storage structures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/53—Querying
    • G06F16/538—Presentation of query results
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/58—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually
    • G06F16/5866—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually using information manually generated, e.g. tags, keywords, comments, manually generated location and time information
    • 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/04842—Selection of displayed objects or displayed text elements
    • 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/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/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q50/00—Systems or methods specially adapted for specific business sectors, e.g. utilities or tourism
    • G06Q50/10—Services
    • G06Q50/20—Education
    • G06Q50/205—Education administration or guidance

Abstract

本发明公开了一种基于Web的作业批改方法、装置及系统，作业批改方法包括：向服务器发送包含作业ID值的第一AJAX请求；接收服务器返回的包括作业图片和绘制数据的第一JSON格式数据；基于绘制数据为作业图片生成Canvas画布；监测Canvas画布上是否有批改作业操作，并在有批改作业操作时更新画布内容；在Canvas画布的画布内容发生更新时对Canvas画布进行更新渲染；在批改作业操作结束时根据Canvas画布的画布对象生成第二JSON格式数据；将第二JSON数据保存至服务器的数据库。本发明基于绘制内容对象动态渲染Canvas画布，可以对已经绘制的内容进行修改，提升了教师批阅作业的效率。

Description

一种基于Web的作业批改方法、装置及系统
技术领域
本发明涉及智能教育技术领域，特别是涉及一种基于Web的作业批改方法、装置及系统。
背景技术
随着网络时代的发展，极大的促进了教育信息化。许多学校已经建立了信息化的教学系统。线上教学作为一种新兴教学模式，成为传统线下教学的有益补充。学生线上学习完成后，提交完成线上布置的作业。教师通过线上批改学生的作业，掌握学生学习情况，提高教学效率。
目前在Wed端批改作业主要是基于HTML5的Canvas API实现。Canvas区域则是画布，通过鼠标或手势操作画笔和橡皮擦工具，在画布上绘制图形达到批改的目的。批改完毕，通过调用Canvas的toDataURL的方法，将Canvas里的绘制数据转变成Base64编码的图片格式，此时的Base64编码图片则是作业批改的结果。最后将Base64编码格式的图片上传至服务器数据库进行保存。
但是目前无法对已经绘制在Canvas画布上的内容进行再次修改操作。具体表现如下：
（1）不能与已经绘制在Canvas的图形做任何类型的交互；如同画画般，图形一旦被绘制，就无法再次被选中和修改，使用起来不方便，一旦绘制出现错误或者需要调整修改等，都需要擦掉重新再来；
（2）橡皮擦只能擦除以鼠标或手指为中心区域的像素内容，不方便处理有重叠的图形，绘制图形过于复杂，操作擦除的时间也会大量增加。
发明内容
本发明的目的在于克服现有技术的一项或多项不足，提供一种基于Web的作业批改方法、装置及系统。
本发明的目的是通过以下技术方案来实现的：一种基于Web的作业批改方法，包括：
向服务器发送包含作业ID值的第一AJAX请求；
接收并解析服务器基于所述第一AJAX请求返回的第一JSON格式数据，所述第一JSON格式数据包括所述作业ID值对应的作业图片和绘制数据；
基于所述绘制数据为所述作业图片生成对应的Canvas画布，所述Canvas画布与所述作业图片一一对应；
监测所述Canvas画布上是否有批改作业操作，并在所述Canvas画布上有批改作业操作时更新对应的画布内容；
在所述Canvas画布的画布内容发生更新时对所述Canvas画布进行更新渲染；
在批改作业操作结束时根据所述Canvas画布的画布对象生成第二JSON格式数据；
向服务器发送包含所述第二JSON格式数据的第二AJAX请求，将所述第二JSON格式数据保存至服务器的数据库。
优选的，所述作业批改方法还包括：
为所述作业图片生成对应的页码目录项，所述页码目录项与所述作业图片一一对应，所述页码目录项包括作业缩略图和页码值；
将所述页码目录项与对应的Canvas画布关联。
优选的，所述服务器返回的绘制数据为所述服务器最近一次保存的所述作业ID值对应的绘制数据；
其中，若所述服务器未保存过所述作业ID值对应的绘制数据，则所述服务器返回的绘制数据为空。
优选的，在所述Canvas画布上有批改作业操作时更新对应的画布内容，包括：
通过监听事件获得绘制工具的起始坐标位置；
根据用户选择的绘制状态生成对应的包含特征属性的绘制内容对象，并记录所述绘制内容对象的起始位置，所述绘制内容对象的起始位置为所述绘制工具的起始坐标位置；
将所述绘制内容对象存储在对应的画布内容中；
通过监听事件实时获取绘制工具的当前位置，并将该当前位置作为所述绘制内容对象最新的结束位置，然后更新所述画布内容；
在绘制工具绘制结束时，停止对所述绘制内容对象的修改和对画布内容的更新。
优选的，在所述Canvas画布上有批改作业操作时更新对应的画布内容，包括：
通过监听事件获得绘制工具的起始坐标位置；
生成包含特征属性的绘制内容对象，并记录所述绘制内容对象的起始位置，所述绘制内容对象的起始位置为所述绘制工具的起始坐标位置；
将所述绘制内容对象存储在对应的画布内容中；
创建一个input文本类型的表单，并将该表单放置于起始坐标位置，进入focus焦点输入状态，表单处于输入状态；
在表单处于输入状态时，获取输入表单的文字内容；
监听blur焦点失去事件，将所述表单内的文字内容记录到绘制内容对象中，并更新所述画布内容。
优选的，在所述Canvas画布上有批改作业操作时更新对应的画布内容，包括：
通过监听事件获得选中需要修改的绘制内容对象；
根据所述绘制内容对象计算当前绘制内容的外部矩形区域；
根据所述外部矩形区域的大小显示编辑控件，以便用户操作所述编辑控件对绘制内容对象进行修改；
根据对所述绘制内容对象的修改更新画布内容。
一种基于Web的作业批改装置，包括：
网络模块，用于向服务器发送包含作业ID值的第一AJAX请求和包含第二JSON格式数据的第二AJAX请求，以及接收并解析所述服务器返回的第一JSON格式数据，所述第一JSON格式数据包括服务器根据所述作业ID值查找到的作业图片和绘制数据；
画布模块，用于基于所述绘制数据为所述作业图片生成对应的Canvas画布，监测所述Canvas画布上是否有批改作业操作，并在所述Canvas画布上有批改作业操作时更新对应的画布内容，在所述Canvas画布的画布内容发生更新时对所述Canvas画布进行更新渲染，以及在批改作业操作结束时根据所述Canvas画布的画布对象生成第二JSON格式数据；
工具模块，用于设置所述Canvas画布的交互方式和绘制样式。
优选的，所述画布模块包括：
事件监听单元，用于监听Canvas画布上的批改作业操作，记录绘制工具的运动轨迹和运动轨迹中各点的坐标，以及在监听到删除操作时触发删除按钮功能；
绘制数据存储单元，用于新增、删除或编辑画布对象，以及新增、删除或编辑绘制内容对象；
绘制内容对象生成单元，用于根据用户选择的绘制状态，生成对应的绘制内容对象；
绘制内容编辑单元，用于根据用户选中的绘制内容对象计算外部矩形区域的大小，在绘制内容对象外显示编辑控件，所述编辑控件用于对绘制内容对象进行拖拽、旋转和变形操作；
绘制数据渲染单元，用于将画布内容中的绘制内容对象依次渲染到Canvas画布内。
优选的，所述作业批改装置还包括：
目录模块，用于为所述作业图片生成对应的页码目录项，以及将所述页码目录项与对应的Canvas画布关联。
一种基于Web的作业批改系统，包括：
基于Web的作业批改装置；
服务器，用于将接收到的作业文件每页内容转换为作业图片，并将所述作业图片保存至数据库中；以及用于根据所述作业批改装置发送过来的作业ID值在数据库中查找对应的作业图片和绘制数据，并将查找到的作业图片和绘制数据组装成第一JSON格式数据返回给所述作业批改装置。
本发明的有益效果是：
（1）本发明通过将绘制内容对象化，基于绘制内容对象动态渲染Canvas画布，可以对已经绘制在Canvas画布上的内容进行修改等操作，使得教师在批阅过程中随时都能修正已经批阅的内容，从而大大提升了教师批阅作业的效率；
（2）本发明中可以通过单点或框选以选中单个或多个已经绘制的图像，对选中的图像视为一个整体进行操作；
（3）本发明中可随意拖拽、旋转、变形已选中的图形，有利于教师进行作业批阅；
（4）本发明中可以对在Canvas画布上绘制的文本内容再次进行修改；
（5）本发明中能对选中的图形进行删除操作，进行删除操作时发生重叠的图形不会受影响；
（6）本发明中作业批改装置可以为PC端或移动端的web浏览器，能满足多种环境下的使用需求。
附图说明
图1为基于Web的作业批改方法的一种流程图；
图2为基于Web的作业批改装置的一种组成框图；
图3为基于Web的作业批改系统的一种组成框图。
具体实施方式
下面将结合实施例，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有付出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
参阅图1-图3，本实施例提供了一种基于Web的作业批改方法、装置及系统：
如图1所示，一种基于Web的作业批改方法，包括：
S1.作业批改装置向服务器发送包含作业ID值的第一AJAX(AsynchronousJavaScript and XML，异步的JavaScript和XML)请求。
本实施例中以作业批改装置为web客户端为例进行说明。
所述作业ID值具有唯一性，即不存在相同的两个作业ID值，使得服务器能够在其数据库中的众多作业文件中定位到目标文件。在一些实施例中，所述服务器的数据库中作业文件的生成方法为：服务器对用户上传的作业文件进行解析，将作业文件每页的内容转换为Base64格式编码的作业图片，然后将作业图片按照页码顺序保存至数据库。
S2.作业批改装置接收并解析服务器基于所述第一AJAX请求返回的第一JSON格式数据，所述第一JSON格式数据包括所述作业ID值对应的作业图片和绘制数据。
一般的，web客户端采用JavaScript对第一JSON(JavaScript Object Notation，JavaScript对象标记)数据进行解析，得到作业图片和绘制数据。所述作业图片是web客户端进行作业批阅的基础性数据。所述服务器返回的绘制数据为所述服务器最近一次保存的所述作业ID值对应的绘制数据；其中，若所述服务器未保存过所述作业ID值对应的绘制数据（比如第一次批阅作业时），则所述服务器返回的绘制数据为空。
所述服务器返回第一JSON格式数据的过程为：服务器将基于作业ID值查找到的作业图片和绘制数据组织生成第一JSON格式数据发送给web客户端。S3.作业批改装置基于所述绘制数据为所述作业图片生成对应的Canvas画布，所述Canvas画布与所述作业图片一一对应。
本实施例中按照作业图片的页码顺序依次为作业图片生成对应的Canvas画布，当然也可以按照其他顺序为作业图片生成对应的Canvas画布。所述Canvas画布与所述作业图片一一对应具体表示：一张Canvas画布只能关联一张作业图片，一张作业图片也只能关联一张Canvas画布。
一般的，生成Canvas画布过程中为所述Canvas画布创建一个对应的JavaScript对象（Object，用于存储大量字符的数据类型，后文称画布对象）。所述画布对象用于记录Canvas画布数据，所述Canvas画布数据包括画布尺寸（比如画布宽和画布高）、Canvas画布对应的作业图片和画布内容等。画布内容指的是画布内容数组，画布内容数组的数据类型是一个数组，用于存储在对应的Canvas画布上的绘制内容对象（即，画布内容数组为用来存储对应的Canvas画布上所有绘制内容对象的容器。
所述画布内容以JavaScript数组（Array，存储有序的元素序列的数据类型，之后称画布内容数组）的方式存储。需要绘制的图形以JavaScript对象（后文称绘制内容对象，在Canvas画布上绘制的内容会生成一个绘制内容对象，该绘制内容对象用于记录这次绘制内容的相关数据（比如坐标位置和颜色等））的方式存储到画布内容数组中，绘制内容对象用于记录绘制内容的相关数据。
S4.作业批改装置监测所述Canvas画布上是否有批改作业操作，并在所述Canvas画布上有批改作业操作时更新对应的画布内容。
用户在Canvas画布上执行批改作业操作前需选择的绘制状态和设定的绘制参数，web客户端根据用户选择的绘制状态和设定的绘制参数改变Canvas画布的交互方式和绘制样式。
所述绘制状态包括画笔状态、直线状态、虚线状态、箭头状态、空心椭圆状态、空心矩形状态和文字状态等，通过选择绘制状态修改将要绘制的内容图形。所述绘制状态还包括特殊的状态，比如选择状态，在选择状态下可以选择绘制内容，并对绘制的内容进行拖拽、拉扯等；此外，在在选择状态下，还可以通过web客户端中的删除工具对选中的单个或多个绘制内容进行删除。
绘制参数包括文字绘制参数和图形绘制参数；文字绘制参数包括颜色、字体、字号、加粗和斜体等，改变当前的文字绘制参数，之后绘制的内容将会按照当前参数进行绘制；图形绘制参数包括颜色和线宽等，改变当前的图形绘制参数，之后绘制的内容将会按照当前参数进行绘制。
一般的，批改作业操作包括在Canvas画布上绘制图形、绘制文本和修改绘制内容对象中的一种或多种。
在一些实施例中，在所述Canvas画布上有批改作业操作时更新对应的画布内容，包括：
S401.通过监听事件获得绘制工具的起始坐标位置。
在Canvas画布上绘制图形时，web客户端通过监听事件采集在Canvas画布上的绘制工具（鼠标或手势）的运动轨迹。在用鼠标或手势绘制开始时，通过监听mousedown、touchstart事件获得起始坐标位置。
S402.根据用户选择的绘制状态生成对应的包含特征属性的绘制内容对象，并记录所述绘制内容对象的起始位置，所述绘制内容对象的起始位置为所述绘制工具的起始坐标位置。在渲染绘制内容对象时，从该绘制内容对象的起始位置开始。
所述特征属性用于判断绘制内容的类别。
S403.将所述绘制内容对象存储在对应的画布内容中。
具体的，将绘制内容对象储存到画布内容的数组中。
S404.通过监听事件实时获取绘制工具的当前位置，并将该当前位置作为所述绘制内容对象最新的结束位置，然后更新所述画布内容。
即，将鼠标或手势的当前位置作为绘制内容对象的结束位置，并在鼠标或手势的当前位置发生改变时更新所述画布内容中绘制内容对象的结束位置。
S405.在绘制工具绘制结束时，停止对所述绘制内容对象的修改和对画布内容的更新。
本实施例中在用鼠标或手势绘制结束时，通过监听mouseup、touchend事件触发停止绘制内容对象的修改和画布内容的更新。
在一些实施例中，在所述Canvas画布上有批改作业操作时更新对应的画布内容，包括：
S421.通过监听事件获得绘制工具的起始坐标位置。
本实施例中，在Canvas画布上绘制文本时，web客户端通过监听mousedown、touchstart事件获得起始坐标位置。
S422.生成包含特征属性的绘制内容对象，并记录所述绘制内容对象的起始位置，所述绘制内容对象的起始位置为所述绘制工具的起始坐标位置。在渲染绘制内容对象时，从该绘制内容对象的起始位置开始。
所述特征属性用于判断绘制内容的类别。
S423.将所述绘制内容对象存储在对应的画布内容中。
具体的，将绘制内容对象储存到画布内容的数组中。
S424.创建一个input文本类型的表单，并将该表单放置于起始坐标位置，进入focus焦点输入状态，此时表单处于输入状态。
S425.在表单处于输入状态时，获取输入表单的文字内容。
例如，获取用户通过键盘输入表单的文字内容。
S426.监听blur焦点失去事件，将所述表单内的文字内容记录到绘制内容对象中，并更新所述画布内容。
在一些实施例中，在所述Canvas画布上有批改作业操作时更新对应的画布内容，包括：
S431.通过监听事件获得选中需要修改的绘制内容对象。
本实施例中，在Canvas画布上修改绘制内容对象时，用户在选择状态下单击或框选绘制内容，web客户端通过事件监听单元得到选中需要修改的绘制内容对象。
S431.根据所述绘制内容对象计算当前绘制内容的外部矩形区域。
S431.根据所述外部矩形区域的大小显示编辑控件，以便用户操作所述编辑控件对绘制内容对象进行修改。
S431.根据对所述绘制内容对象的修改更新画布内容。S5.作业批改装置在所述Canvas画布的画布内容发生更新时对所述Canvas画布进行更新渲染。
本实施例中，所述Canvas画布的画布内容发生更新（比如，画布内容数组或绘制内容对象发生增加、减少、修改等）时对所述Canvas画布进行更新渲染。在更新Canvas画布时，先通过clearRect函数清空Canvas画布，再绘制对应的作业图片作为背景图，然后将画布内容对象中的绘制内容对象依次渲染到Canvas画布中。
S6.作业批改装置在批改作业操作结束时根据所述Canvas画布的画布对象生成第二JSON格式数据。
本实施例中，web客户端根据mouseup、touchend、blur事件监听判断本次绘制是否结束，若绘制结束，将所有Canvas画布对应的画布对象按页码顺序排列放入一个数组并转换生成第二JSON格式数据。
S7.作业批改装置向服务器发送包含所述第二JSON格式数据的第二AJAX请求，将所述第二JSON格式数据保存至服务器的数据库。
在一些实施例中，所述作业批改方法还包括：为所述作业图片生成对应的页码目录项，所述页码目录项与所述作业图片一一对应，所述页码目录项包括作业缩略图和页码值；将所述页码目录项与对应的Canvas画布关联。
本实施例中，将所述页码目录项与对应的Canvas画布关联，包括：通过对页码目录项绑定DOM（Document Object Model 文档对象模型）点击事件，将页码目录项与对应的Canvas画布进行关联，点击页码目录项能够快速滚动定位到对应的Canvas画布。
如图2所示，一种基于Web的作业批改装置，包括网络模块、画布模块和工具模块。
所述网络模块用于向服务器发送包含作业ID值的第一AJAX请求和包含第二JSON格式数据的第二AJAX请求，以及接收并解析所述服务器返回的第一JSON格式数据。所述第一JSON格式数据包括服务器根据所述作业ID值查找到的作业图片和绘制数据；所述第二JSON格式数据包括Canvas画布对应的画布对象。
所述画布模块用于基于所述绘制数据为所述作业图片生成对应的Canvas画布，监测所述Canvas画布上是否有批改作业操作，并在所述Canvas画布上有批改作业操作时更新对应的画布内容，在所述Canvas画布的画布内容发生更新时对所述Canvas画布进行更新渲染，以及在批改作业操作结束时根据所述Canvas画布的画布对象生成第二JSON格式数据。
所述Canvas画布具有画布对象，所述画布对象用于记录Canvas画布数据，所述Canvas画布数据包括画布尺寸（比如画布宽和画布高）、Canvas画布对应的作业图片和画布内容等。
所述批改作业操作包括在Canvas画布上绘制图形、绘制文本和修改绘制内容对象中的一种或多种。
在一些实施例中，所述画布模块包括事件监听单元、绘制数据存储单元、绘制内容对象生成单元、绘制内容编辑单元和绘制数据渲染单元。
所述事件监听单元用于通过记录鼠标或手势的运动轨迹，记录运动轨迹中的坐标点。所述web客户端为PC端web浏览器时，以mousedown开始监听，mousemove连续采集，mouseup停止监听；所述web客户端为移动端web浏览器时，以touchstart开始监听，touchmove连续采集，touchend停止监听。本实施例可以通过减少mousemove和touchmove的采集频率，从而在不影响运动轨迹的记录情况下降低卡顿。事件监听单元通过keyup事件监听按下Delete键，触发删除按钮功能。事件监听单元通过监听focus事件判断文本输入状态，监听blur焦点失去事件判断文本绘制结束。
所述绘制数据存储单用于新增、删除、编辑画布对象和绘制内容对象。
所述绘制内容对象生成单元用于根据用户选择的绘制状态，生成对应的JavaScript对象。绘制内容对象内部记录自身的属性，绘制内容对象的属性包括：类型、颜色、线宽、起始位置、结束位置、旋转角度、变形、位移、字体、字号、加粗和斜体等。
所述绘制内容编辑单元用于根据用户选中的绘制内容对象，计算外部矩形区域大小，在绘制内容对象外显示编辑控件，对编辑控件进行的拖拽、旋转、变形等操作会作用到选择的绘制内容对象上。
所述绘制数据渲染单元用于将画布内容数组内的绘制内容对象依次渲染到Canvas画布内。渲染前根据各自的特征属性进行判断渲染内容类型，基于内容类型调用预设的图形生成函数。
所述工具模块用于用户设置所述Canvas画布的交互方式和绘制样式。用户通过选择绘制状态和设定的绘制参数改变Canvas画布的交互方式和绘制样式。
在一些实施例中，所述作业批改装置还包括目录模块，所述目录模块用于为所述作业图片生成对应的页码目录项，以及将所述页码目录项与对应的Canvas画布关联。
如图3所示，一种基于Web的作业批改系统，包括服务器和上述实施例示出的基于Web的作业批改装置。所述服务器用于将接收到的作业文件每页内容转换为作业图片，并将所述作业图片保存至数据库中；以及用于根据所述作业批改装置发送过来的作业ID值在数据库中查找对应的作业图片和绘制数据，并将查找到的作业图片和绘制数据组装成第一JSON格式数据返回给所述作业批改装置。
以上所述仅是本发明的优选实施方式，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。

Claims (10)

1.一种基于Web的作业批改方法，其特征在于，包括：
向服务器发送包含作业ID值的第一AJAX请求；
接收并解析服务器基于所述第一AJAX请求返回的第一JSON格式数据，所述第一JSON格式数据包括所述作业ID值对应的作业图片和绘制数据；
基于所述绘制数据为所述作业图片生成对应的Canvas画布，所述Canvas画布与所述作业图片一一对应；
监测所述Canvas画布上是否有批改作业操作，并在所述Canvas画布上有批改作业操作时更新对应的画布内容；
在所述Canvas画布的画布内容发生更新时对所述Canvas画布进行更新渲染；
在批改作业操作结束时根据所述Canvas画布的画布对象生成第二JSON格式数据；
向服务器发送包含所述第二JSON格式数据的第二AJAX请求，将所述第二JSON格式数据保存至服务器的数据库。
2.根据权利要求1所述的一种基于Web的作业批改方法，其特征在于，所述作业批改方法还包括：
为所述作业图片生成对应的页码目录项，所述页码目录项与所述作业图片一一对应，所述页码目录项包括作业缩略图和页码值；
将所述页码目录项与对应的Canvas画布关联。
3.根据权利要求1所述的一种基于Web的作业批改方法，其特征在于，所述服务器返回的绘制数据为所述服务器最近一次保存的所述作业ID值对应的绘制数据；
其中，若所述服务器未保存过所述作业ID值对应的绘制数据，则所述服务器返回的绘制数据为空。
4.根据权利要求1所述的一种基于Web的作业批改方法，其特征在于，在所述Canvas画布上有批改作业操作时更新对应的画布内容，包括：
通过监听事件获得绘制工具的起始坐标位置；
根据用户选择的绘制状态生成对应的包含特征属性的绘制内容对象，并记录所述绘制内容对象的起始位置，所述绘制内容对象的起始位置为所述绘制工具的起始坐标位置；
将所述绘制内容对象存储在对应的画布内容中；
通过监听事件实时获取绘制工具的当前位置，并将该当前位置作为所述绘制内容对象最新的结束位置，然后更新所述画布内容；
在绘制工具绘制结束时，停止对所述绘制内容对象的修改和对画布内容的更新。
5.根据权利要求1所述的一种基于Web的作业批改方法，其特征在于，在所述Canvas画布上有批改作业操作时更新对应的画布内容，包括：
通过监听事件获得绘制工具的起始坐标位置；
生成包含特征属性的绘制内容对象，并记录所述绘制内容对象的起始位置，所述绘制内容对象的起始位置为所述绘制工具的起始坐标位置；
将所述绘制内容对象存储在对应的画布内容中；
创建一个input文本类型的表单，并将该表单放置于起始坐标位置，进入focus焦点输入状态，表单处于输入状态；
在表单处于输入状态时，获取输入表单的文字内容；
监听blur焦点失去事件，将所述表单内的文字内容记录到绘制内容对象中，并更新所述画布内容。
6.根据权利要求1所述的一种基于Web的作业批改方法，其特征在于，在所述Canvas画布上有批改作业操作时更新对应的画布内容，包括：
通过监听事件获得选中需要修改的绘制内容对象；
根据所述绘制内容对象计算当前绘制内容的外部矩形区域；
根据所述外部矩形区域的大小显示编辑控件，以便用户操作所述编辑控件对绘制内容对象进行修改；
根据对所述绘制内容对象的修改更新画布内容。
7.一种基于Web的作业批改装置，其特征在于，包括：
网络模块，用于向服务器发送包含作业ID值的第一AJAX请求和包含第二JSON格式数据的第二AJAX请求，以及接收并解析所述服务器返回的第一JSON格式数据，所述第一JSON格式数据包括服务器根据所述作业ID值查找到的作业图片和绘制数据；
画布模块，用于基于所述绘制数据为所述作业图片生成对应的Canvas画布，监测所述Canvas画布上是否有批改作业操作，并在所述Canvas画布上有批改作业操作时更新对应的画布内容，在所述Canvas画布的画布内容发生更新时对所述Canvas画布进行更新渲染，以及在批改作业操作结束时根据所述Canvas画布的画布对象生成第二JSON格式数据；
工具模块，用于设置所述Canvas画布的交互方式和绘制样式。
8.根据权利要求7所述的一种基于Web的作业批改装置，其特征在于，所述画布模块包括：
事件监听单元，用于监听Canvas画布上的批改作业操作，记录绘制工具的运动轨迹和运动轨迹中各点的坐标，以及在监听到删除操作时触发删除按钮功能；
绘制数据存储单元，用于新增、删除或编辑画布对象，以及新增、删除或编辑绘制内容对象；
绘制内容对象生成单元，用于根据用户选择的绘制状态，生成对应的绘制内容对象；
绘制内容编辑单元，用于根据用户选中的绘制内容对象计算外部矩形区域的大小，在绘制内容对象外显示编辑控件，所述编辑控件用于对绘制内容对象进行拖拽、旋转和变形操作；
绘制数据渲染单元，用于将画布内容中的绘制内容对象依次渲染到Canvas画布内。
9.根据权利要求7所述的一种基于Web的作业批改装置，其特征在于，所述作业批改装置还包括：
目录模块，用于为所述作业图片生成对应的页码目录项，以及将所述页码目录项与对应的Canvas画布关联。
10.一种基于Web的作业批改系统，其特征在于，包括：
如权利要求7-9任意一项所述的基于Web的作业批改装置；
服务器，用于将接收到的作业文件每页内容转换为作业图片，并将所述作业图片保存至数据库中；以及用于根据所述作业批改装置发送过来的作业ID值在数据库中查找对应的作业图片和绘制数据，并将查找到的作业图片和绘制数据组装成第一JSON格式数据返回给所述作业批改装置。
CN202111565459.2A 2021-12-21 2021-12-21 一种基于Web的作业批改方法、装置及系统 Active CN113934876B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111565459.2A CN113934876B (zh) 2021-12-21 2021-12-21 一种基于Web的作业批改方法、装置及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111565459.2A CN113934876B (zh) 2021-12-21 2021-12-21 一种基于Web的作业批改方法、装置及系统

Publications (2)

Publication Number Publication Date
CN113934876A CN113934876A (zh) 2022-01-14
CN113934876B true CN113934876B (zh) 2022-02-22

Family

ID=79289315

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111565459.2A Active CN113934876B (zh) 2021-12-21 2021-12-21 一种基于Web的作业批改方法、装置及系统

Country Status (1)

Country Link
CN (1) CN113934876B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117557240B (zh) * 2024-01-11 2024-04-02 成都泰盟软件有限公司 批阅作业的方法、系统、设备和存储介质

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6741242B1 (en) * 2000-03-23 2004-05-25 Famotik Kabushikikaisha Multimedia documents integrating and displaying system
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
CN105630939A (zh) * 2015-12-23 2016-06-01 深圳宸睿科技有限公司 一种通用画布输入接口设计方法及装置
CN105653510A (zh) * 2015-12-28 2016-06-08 智慧方舟科技有限公司 一种电子化作业的批改方法、装置和系统
CN107168674A (zh) * 2017-06-19 2017-09-15 浙江工商大学 投屏批注方法和系统
CN108241480A (zh) * 2018-01-24 2018-07-03 上海哇嗨网络科技有限公司 显示内容的批注方法、显示客户端及投屏客户端
CN109634603A (zh) * 2018-11-28 2019-04-16 广东智合创享营销策划有限公司 一种基于Canvas画布的H5页面制作方法和装置
CN109918604A (zh) * 2019-03-07 2019-06-21 智慧芽信息科技(苏州)有限公司 网页绘图方法、装置、设备及存储介质
CN111047933A (zh) * 2020-01-07 2020-04-21 上海奇初教育科技有限公司 一种教辅自动批改系统
CN111930381A (zh) * 2020-09-21 2020-11-13 知学云(北京)科技有限公司 一种支持SaaS多租户系统的个性化页面配置方法

Family Cites Families (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP4085123B1 (ja) * 2007-03-29 2008-05-14 株式会社サピエンス 画像表示更新方法およびサーバ・クライアントシステム並びに描画操作エコーバックスクリプト
US20120066577A1 (en) * 2010-09-09 2012-03-15 Microsoft Corporation Concurrent Editing of Online Drawings
US20160232144A1 (en) * 2015-02-06 2016-08-11 Liang Zhou Browser extension allowing web users to draw on live web pages
CN104820539A (zh) * 2015-05-19 2015-08-05 重庆大学 一种可交互式图形的复现方法
CN109388329A (zh) * 2015-12-16 2019-02-26 广州视睿电子科技有限公司 远程批注同步的方法与系统
CN111857893A (zh) * 2019-04-08 2020-10-30 百度在线网络技术（北京）有限公司 标注图形生成方法及装置
CN111047934A (zh) * 2020-01-07 2020-04-21 上海奇初教育科技有限公司 一种试卷制作及自动批改系统
CN111858858A (zh) * 2020-04-29 2020-10-30 上海奇初教育科技有限公司 一种智能错题本制作方法及自动批改系统
CN112529055A (zh) * 2020-12-02 2021-03-19 博云视觉科技(青岛)有限公司 一种图像标注和标注数据集处理方法
CN112562032A (zh) * 2020-12-21 2021-03-26 长扬科技（北京）有限公司 一种高效绘制工控网络拓扑图的方法、装置
CN112817651A (zh) * 2021-01-14 2021-05-18 许继集团有限公司 一种基于Canvas画布的图形生成方法及系统
CN113626746A (zh) * 2021-07-30 2021-11-09 浪潮云信息技术股份公司 一种基于web页面自定义绘图的方法

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6741242B1 (en) * 2000-03-23 2004-05-25 Famotik Kabushikikaisha Multimedia documents integrating and displaying system
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
CN105630939A (zh) * 2015-12-23 2016-06-01 深圳宸睿科技有限公司 一种通用画布输入接口设计方法及装置
CN105653510A (zh) * 2015-12-28 2016-06-08 智慧方舟科技有限公司 一种电子化作业的批改方法、装置和系统
CN107168674A (zh) * 2017-06-19 2017-09-15 浙江工商大学 投屏批注方法和系统
CN108241480A (zh) * 2018-01-24 2018-07-03 上海哇嗨网络科技有限公司 显示内容的批注方法、显示客户端及投屏客户端
CN109634603A (zh) * 2018-11-28 2019-04-16 广东智合创享营销策划有限公司 一种基于Canvas画布的H5页面制作方法和装置
CN109918604A (zh) * 2019-03-07 2019-06-21 智慧芽信息科技(苏州)有限公司 网页绘图方法、装置、设备及存储介质
CN111047933A (zh) * 2020-01-07 2020-04-21 上海奇初教育科技有限公司 一种教辅自动批改系统
CN111930381A (zh) * 2020-09-21 2020-11-13 知学云(北京)科技有限公司 一种支持SaaS多租户系统的个性化页面配置方法

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
基于HTML5的文档在线评阅及批注的实现;蔡向高等;《中国信息技术教育》;20150508(第09期);第75-77页 *
基于WebGL的Canvas元素2D绘制加速;谢贤博等;《软件》;20161215(第12期);第154-160页 *

Also Published As

Publication number Publication date
CN113934876A (zh) 2022-01-14

Similar Documents

Publication Publication Date Title
US7167585B2 (en) Interfacing with ink
CN1318940C (zh) 在文档上覆盖电子墨迹的方法
US10497158B2 (en) Aligning objects with text
US5729704A (en) User-directed method for operating on an object-based model data structure through a second contextual image
US5467441A (en) Method for operating on objects in a first image using an object-based model data structure to produce a second contextual image having added, replaced or deleted objects
US8194075B2 (en) Method and system for generating and displaying an interactive dynamic list view of multiply connected objects
EP0150296A2 (en) Electronic handwriting method and facilty
KR102369604B1 (ko) 고정 포맷 문서를 리플로우 포맷으로 프리젠트하는 기법
JP2003303047A (ja) 画像入力及び表示システム、ユーザインタフェースの利用方法並びにコンピュータで使用可能な媒体を含む製品
CN108664461B (zh) 一种网页表单自动填写方法及装置
US11797258B2 (en) Conversational analytics with data visualization snapshots
CN113934876B (zh) 一种基于Web的作业批改方法、装置及系统
CN110663017B (zh) 多笔画智能墨水手势语言
CN113918144A (zh) 基于图像生成可复用页面的方法及系统
CN109033049B (zh) Ppt文档的生成方法及装置、存储介质、终端
CN107391015B (zh) 一种智能平板的控制方法、装置、设备及存储介质
Mohian et al. PSDoodle: Searching for app screens via interactive sketching
CN111934985A (zh) 媒体内容的分享方法、装置、设备及计算机可读存储介质
CN110162301B (zh) 一种表单渲染方法、装置和存储介质
JPH0812668B2 (ja) 手書き校正方法
CN116245052A (zh) 一种图纸迁移方法、装置、设备和存储介质
US6295060B1 (en) Method of quickly expanding large lists of compressed data
CN112817505A (zh) 软件信息界面显示方法、装置、存储介质及设备
US20230244325A1 (en) Learned computer control using pointing device and keyboard actions
JP7373828B2 (ja) 情報処理装置、及びプログラム

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