您的位置 首页 golang

使用Go开发前端应用(四)- 操作canvas绘制一个表格


前言

这篇文章会讲下,如果通过Go来操作canvas,然后画一个类似腾讯文档表格一样的,在线的表格。当然,这肯定是个demo(你懂的)。然后,这篇文章主要会讲下面几个点:

  • 使用Go来操作canvas绘制表格
  • 使用js来操作canvas绘制表格
  • 性能问题

使用Go操作canvas绘制表格

这里我们就直接上Go的代码了,如果有对Go如何编译成wasm或者其他的基础问题,可以查看这个系列的之前的几篇文章。

package mainimport ("fmt""syscall/js""time")var drawCtx js.Valuevar window js.Valuefunc init() {window = js.Global()doc := window.Get("document")body := doc.Get("body")canvas := doc.Call("createElement", "canvas")canvas.Set("height", window.Get("innerHeight"))canvas.Set("width", window.Get("innerWidth"))body.Call("appendChild", canvas)drawCtx = canvas.Call("getContext", "2d")}func drawTable() {width := window.Get("innerWidth").Int()height := window.Get("innerHeight").Int()// 绘制之前清空下画布drawCtx.Call("clearRect", 0, 0, width, height)// 单元格的宽高cellHeight := 22cellWidth := 120drawCtx.Set("strokeStyle", "#dcdcdc")drawCtx.Set("lineWidth", 1)drawCtx.Call("translate", -0.5, -0.5)drawCtx.Call("beginPath")// 划竖线for i := 0; i < width; i = i + cellWidth {drawCtx.Call("moveTo", i, 0)drawCtx.Call("lineTo", i, height)drawCtx.Call("stroke")}// 划横线for j := 0; j < height; j = j + cellHeight {drawCtx.Call("moveTo", 0, j)drawCtx.Call("lineTo", width, j)}drawCtx.Call("stroke")drawCtx.Call("translate", 0.5, 0.5)}func main() {drawTable()// 阻止go程序退出,因为退出了,js端就不能再调用了signal := make(chan int)<-signal}复制代码

前端js的代码:

const go = new Go()WebAssembly.instantiateStreaming(fetch('main.wasm'), go.importObject)    .then(async result => {        go.run(result.instance);    });复制代码

上面就是一个平平无奇的使用Go绘制一个二维表格的demo。先看下效果,然后再来讲下代码:

效果就是上面这个样子,看起来跟腾讯文档表格还是挺像的,对不对?

在上面的代码中,我们定义了一个init函数和一个drawTable函数,你可能已经发现了,代码里面,其他任何地方都没有调用init函数,为什么可以正常运行?drawCtx等对象正常初始化了。这是为啥呢?其实如果你熟悉Go的话,就知道,init方法,在每个包加载执行之前,会先执行该包下的init方法。这个是Go语言本身的特性,在我们这个例子中,那就是init方法,会比main方法先执行。这样你应该明白了对不对。

init函数代码说明

drawCtx = canvas.Call("getContext", "2d")复制代码

在初始化方法中,前面的几行代码,就是往页面中添加一个canvas的dom,然后获取到canvas对象。上面的一行代码最关键,通过canvas对象,获取了canvas的2d上下文对象,有了这个对象之后,我们才能够执行绘制的操作。

drawTable函数代码说明

   width := window.Get("innerWidth").Int()   height := window.Get("innerHeight").Int()复制代码

从截图可以看出,我们的表格是占满整个窗口的,所以我们需要先获取窗口的宽高。

   drawCtx.Call("translate", -0.5, -0.5)   drawCtx.Call("translate", 0.5, 0.5)复制代码

如果你对canvas的绘制原理不是特别了解,你应该会看不懂这两行代码在干什么。

来看下去掉这两行代码之后的效果:

对比上面的截图,你应该可以发现这两行是用来干嘛的了。

drawCtx.Call("beginPath")// 划竖线for i := 0; i < width; i = i + cellWidth {drawCtx.Call("moveTo", i, 0)drawCtx.Call("lineTo", i, height)drawCtx.Call("stroke")}// 划横线for j := 0; j < height; j = j + cellHeight {drawCtx.Call("moveTo", 0, j)drawCtx.Call("lineTo", width, j)}drawCtx.Call("stroke")复制代码

这里的代码,应该比较简单了,就是分别绘制表格的横线和竖线。应该很容易看懂了对不对。

main函数里面,只有调用了drawTable()函数,没有其他操作,就不说了。

上面大概就是使用Go来操作canvas绘制一个二维的表格了,不过非常简陋,实际项目中肯定不是这么搞的,但是用的东西就是上面这些。你懂我意思吧?

使用js来操作canvas绘制表格

因为后面要对比下,js和wasm的操作canvas的性能,所以,还是给一个js的代码:

let drawCtx ;const width = window.innerWidthconst height = window.innerHeightfunction init() {    const canvas = document.createElement("canvas");    canvas.width = width;    canvas.height = height;    document.body.appendChild(canvas);    drawCtx = canvas.getContext("2d")}function drawTable() {    // 绘制之前清空下画布    drawCtx.clearRect(0, 0, width, height)    // 单元格的宽高    const cellHeight = 22    const cellWidth = 120    drawCtx.strokeStyle = "#dcdcdc";    drawCtx.lineWidth = 1;    drawCtx.translate(-0.5, -0.5)    drawCtx.beginPath()    // 划竖线    for(let i = 0; i < width; i = i + cellWidth ){        drawCtx.moveTo(i, 0)        drawCtx.lineTo(i, height)        drawCtx.stroke()    }    // 划横线    for(let j = 0; j < height; j = j + cellHeight) {        drawCtx.moveTo(0, j)        drawCtx.lineTo(width, j)    }    drawCtx.stroke()    drawCtx.translate(0.5, 0.5)}init();// const s = Date.now();// for (let i=0; i< 100000; i++) {    drawTable();// }// console.log(Date.now() - s)复制代码

代码跟上面的Go代码,一模一样,因为我就是从上面复制过来,改成js的。 js的代码,我这里就不说明了,你应该都可以看懂的,对不对?

性能问题

绘制1000次

wasm(Go):300ms左右

js: 24ms左右

绘制10000次

wasm(Go):2.7s左右

js: 180ms左右

可以看到,直接使用js来绘制canvas会比wasm要快很多。 这其实也说明一个问题,wasm它的使用场景,并不是让你来操作dom的,它是使用在特定场景下的,比如上篇文章中说的文件md5计算的场景,操作dom这种,我们还是按常规操作就行了。上面的测试基于我的这个demo代码,然后在Chrome浏览器,iMac下的测试数据,如果有问题,欢迎联系我。

总结

上面的例子可以看出,使用Go可以操作前端的任何东西,包括dom,js对象等等。但是,我们在实际使用的时候,一定要知道,什么场景,使用什么样的技术来实现,能够得到最优的性能,这才是我们在实际的项目开发中,需要考虑的点。这篇文章大概就到这里,有任何问题,欢迎联系我,?。


文章来源:智云一二三科技

文章标题:使用Go开发前端应用(四)- 操作canvas绘制一个表格

文章地址:https://www.zhihuclub.com/380.shtml

关于作者: 智云科技

热门文章

网站地图