2

私はキャンバスを「偽造」しようとしています。この意図で、この偽のキャンバスを、おそらく任意のフレームワークに渡して、すべての線、曲線、およびmoveToを後処理します。

これを管理するために、実際に機能するこのコードを試しましたが、この幸運なショットでどれだけの幸運があったか知りたいです。

(function(){
    function DebugCanvas(){
        this._dom = document.createElement( 'canvas' );
        addPropertiesToObject.call( this, this._dom );
        this._fakeContext = null;
    }

    Object.defineProperties( DebugCanvas.prototype, 
    {   
        'constructor' : {
            'value' : DebugCanvas,
            'enumerable' : true
        },

        'getContext' : {
            'value' : function( which ){
                var ctx;
                if( which == '2d' ){
                    if( this._fakeContext == null ){
                        this._fakeContext = new FakeContext( this._dom );
                    }
                    ctx = this._fakeContext;
                } else {
                    ctx = this._dom.getContext( which );
                }
                return ctx;
            },
            'enumerable' : true
        }
    }
);

function FakeContext( debugCanvas ){
    this._debugCanvas = debugCanvas;
    this._realContext = debugCanvas._dom.getContext( '2d' );
    addPropertiesToObject.call( this, this._realContext );
}

Object.defineProperties( FakeContext.prototype, {
    'toString' : {
        'value' : function(){
            return '[Object FakeContext]';
        },
        'enumerable' : true
    },

    'canvas' : {
        'get' : function(){
            return this._debugCanvas;
        },
        'set' : function( c ){ return },
        'enumerable' : true
    }
});

function addPropertiesToObject( from ){
    var description, obj;

    for( var prop in from ){
        obj = from;
        do {
            if( obj.hasOwnProperty( prop ) && 
                !this.constructor.prototype.hasOwnProperty( prop ) ){

                try{
                    description = Object.getOwnPropertyDescriptor( obj, prop );
                    Object.defineProperty( this.constructor.prototype, prop, description );
                } catch( err ){
                    this[ prop ] = from[ prop ]; 
                }
                break;
            }
        } while( obj = Object.getPrototypeOf( obj ) );
    }
};
})()

基本的な考え方は、canvas'、canvas.prototypes'（すべてのチェーンが上向き）、contexts'、context.prototypes'のすべてのプロパティを、まだ存在していない限り、偽のオブジェクトのプロトタイプにコピーすることです。

4

1 に答える 1

2

javascriptでは、オリジナルと同じプロパティ/メソッドをすべて使用して置換オブジェクトを自由に作成し、オリジナルの代わりに使用できます。メソッド呼び出しまたはプロパティアクセスはどちらの方法でも同じであり、呼び出しコードは通常、違いを認識しません。これは、JavaScriptで実行するのに非常に便利な場合があります。

このような置換のより複雑な部分は、渡すコードが希望どおりに機能するように、すべてのメソッドとプロパティの実際の動作をエミュレートすることです。しかし、それがうまくできれば、うまくいくはずです。運は関係ありません-メソッド/プロパティのエミュレーションが正しい限り、これは機能するはずです。

于 2012-09-09T17:04:21.117 に答える