Subclassing CanvasRenderingContext2D

Subclassing CanvasRenderingContext2D

本文关键字:CanvasRenderingContext2D Subclassing      更新时间:2024-05-07

是否可以创建CanvasRenderingContext2D的子类,并将其实例指定为Canvas元素的上下文?

我希望能够做一些类似的事情:

class ContextSub extends CanvasRenderingContext2D
    shape : (pointList, solid = true, closed=true) =>
        @beginPath()
        @lineTo p[0], p[1] for p in pointList
        if closed
             @closePath()
             if solid then @fill() else @stroke()
        else
            if solid then @fill() else @stroke()
            @closePath()

然后:

canvas = document.getElementById "canvas"
canvas.setContext new ContextSub()

目前,我正在处理这样的问题:

class MyContext 
    constructor : (ctx) ->
        for key of ctx
            @[key] = ctx[key]
canvas = document.getElementById "canvas"
myContext = new MyContext(canvas.getContext('2d'))

这让我很接近,但看起来像是黑客。这种方法有什么重大的不可预见的缺点吗?

更新

作为对@kangax的回应:我正在开发一个图形框架,我希望语法尽可能简洁。我希望避免使用@ctx.arc(), @ctx.lineStyle(),而只是将上下文子类化,然后能够使用@arc(), @shape()等。

更新2

我做了更多的挖掘,但这似乎是不可能的。我注意到上下文对象有一个名为canvas的属性,所以我尝试扩展上下文,然后将该属性设置为html中定义的canvas。这似乎很有效,因为没有抛出任何错误,但调用超类的任何方法都会导致Illegal Invocation错误。同样,使用上面的破解方法也导致了同样的错误。显然,这不是CanvasRenderingContext2D的预期用例!

不要尝试对本机对象的原型进行子类化或修改,因为您很可能会与web安全性发生冲突。

相反,如果你想构建自己的框架,透明地处理CanvasRenderingContext2D,可以使用类似代理对象的东西:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

(警告:ECMAScript6功能,但可以用手写的JavaScript模拟)

相关文章:
  • 没有找到相关文章