欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

数学教具功能beta版本开发

程序员文章站 2022-04-30 19:15:12
相关了解:jCanvas防止注入MediaRecord 动画日志收集废话不多说先贴成品抖音上有很多类似下图的情况,所以就突发奇想,想做一个简单的工具,目前还是初版,功能很简单;方便教学场景的使用工具,目前只支持 绘制矩形、圆形、直线、文字,支持动画过渡体验地址: https://ibeeger.com/math/体验地址中案例写的比较简单,凑合看了~~~~使用文档说明绘制矩形:rect(x,y, width,height)绘制圆形:circle(r, x, y)绘制直线...

相关了解:

  • jCanvas
  • 防止注入
  • MediaRecord 动画
  • 日志收集

废话不多说先贴成品
数学教具功能beta版本开发
数学教具功能beta版本开发
抖音上有很多类似下图的情况,所以就突发奇想,想做一个简单的工具,目前还是初版,功能很简单;方便教学场景的使用工具,
数学教具功能beta版本开发
目前只支持 绘制矩形、圆形、直线、文字,支持动画过渡

体验地址: https://ibeeger.com/math/
体验地址中案例写的比较简单,凑合看了~~~~

使用文档说明

  • 绘制矩形:rect(x,y, width,height)
  • 绘制圆形:circle(r, x, y)
  • 绘制直线:line({x: x, y: y}, {x: x, y: y}, color) 开始坐标,结束坐标 color = ‘#xxxxxx’
  • 延迟动效: delay(s) //s 单位秒
  • 过渡动效:to({proto}, s) // 参数1属性变更如 {x: 10} , 参数s 单位秒

jCanvas文档:https://projects.calebevans.me/jcanvas/docs/

前端注意:
由于做的比较简陋,用到了eval,会有一些js方法的隐患,知识做了简单的过滤,希望各位大佬发现问题多多指点

replace(/\$|XMLHttpRequest|http|ajax|fetch/g, '').trim()

录制动画:前面已经说过了 MediaRecord 录制canvas

let recorder = new MediaRecorder(stream, {
		mimeType: 'video/webm;codecs=vp8'
	})
	recorder.start(0);
	recorder.addEventListener('dataavailable', function(e) {
		if (e.data.size > 0) {
			chunks.push(e.data);
		}
		if (recorder.state == 'inactive') {
			const blob = new Blob(chunks, {
				type: 'video/webm;codecs=vp8'
			});
			var reader = new FileReader();
			reader.onload = function() {
				// console.log(reader.result); // base64格式 
			}
			// reader.readAsText(blob, 'utf-8')
			reader.readAsDataURL(blob, 'utf-8')
			// reader.readAsBinaryString(blob, 'utf-8')
			// reader.readAsArrayBuffer(blob, 'utf-8')
			createWebM(URL.createObjectURL(blob));
		}
	}, false);

下载录制动画:
数学教具功能beta版本开发
绘制完成之后需要点击运行之后,才能生成动画,点击下载等待动画生成完成(大概3~5秒)之后就可以到本地,webm格式。
如果只是绘制静态的图形,可以直接下载图片。
当然也可以扣扣、WX截图~~~

日志收集:

let bs = window.btoa(encodeURIComponent(jsstr));
let img = document.createElement('img');
img.src = 'xxxxx.com/log?c='+bs;

收集到转换的公式
数学教具功能beta版本开发
最后欢迎各位老师多多提意见、建议

本文地址:https://blog.csdn.net/uk_51/article/details/109366709