Vamos primeiro olhar para uma gramática de desenho de tela normal:
ctx.arc (Centerx, Centery, raio, 0, pi*2, verdadeiro);
ctx.shadowcolor = 'rgba (0,0,0,0,5)';
ctx.shadowblur = "10";
ctx.fill ();
ctx.BeginPath ();
ctx.shadowcolor = 'rgba (0,0,0,0)';
ctx.moveto (CenterX-Radius, Centery);
ctx.lineto (Centerx -radius, Centery - 50);
ctx.Lineto (CenterX+Radius, Centery - 50);
ctx.Lineto (CenterX+Radius, Centery);
// ctx.Lineto (Centerx-Radius, Centery);
ctx.fill ();
ctx.BeginPath ();
ctx.fillstyle = 'rgba (255,0,0,1)';
ctx.arc (Centerx, Centery-50, Radius, 0, pi*2, verdadeiro);
ctx.fill ();
Há duas coisas que não estou feliz com a sintaxe nativa da tela: 1. Cada frase escreveu CTX (isto é, o objeto context2d da tela) e 2. Cada função ou propriedade deve ocupar uma linha, desperdiçar espaço.
Tenho muita apreciação pela sintaxe da cadeia de JQuery, como:
$ ('#div1'). Mostrar (300) .html (p) .Delay (3000) .SlideUp (300) .remove ();
Então, eu também quero usar esta sintaxe para fazer o desenho de tela:
ctx.moveto (500,0) .lineto (500.500) .strokestyle ('#f00'). Stroke ();
Existe uma maneira de simular um objeto context2d. Este objeto suporta todos os métodos de contexto nativo, mas também suporta métodos encadeados.
No entanto, não pode haver muito código, pois haverá mais ninguém gosta de usá -lo.
A seguir, o segmento de código completo. Eu nomeei esta classe XtendCanvas (começa com x novamente):
// Let Canvas suporta a sintaxe da cadeia, de dez anos de luz
~function () {var pro = ['save','restore', 'scale', 'rotate', 'translate', 'transform', 'createLinearGradient', 'createRadialGradient', 'getLineDash', 'clearRect', 'fillRect', 'beginPath', 'closePath', 'moveTo', 'lineTo', 'lineTo', 'quadraticCurveTo', 'BezierCurveto', 'Arcto', 'Rect', 'Arc', 'Fill', 'Stroke', 'Clip', 'IsPointinPath', 'MeasuText', 'Clearshadow', 'FillText,' StroKetext ',' Strokerect, 'Drawimage', 'DrawImageFrome' PutInTurt ',', 'Strokerect', drawimage ',' DrawImageFrome 'PutInTret', ',' Strokerect, DrawImage ',' DrawImageFrome 'Putim', 'Strokerect', Drawimage ',' DrawImageTert. 'CreateImagedata', 'getImagedata', 'Linha de Linha', 'Strokestyle', 'Globalalpha', 'FillStyle', 'Font', 'ShadoffOffsetX', 'ShadoffOffsety', 'Shadowblur', 'ShadowColor', 'linecap', 'LineJoin', 'miterlimit'];
função xtendCanvas (Canvas) {
var ctx = Canvas.getContext ('2d'),
fn = function () {},
fnp = fn.prototype;
for (var j = 0, p = pro [0]; p; p = pro [j ++]) {
fn.prototype [p] = function (p) {
Return function () {
var args = array.prototype.slice.call (argumentos);
// console.log (args);
if (typeof ctx [p] == 'function') {
ctx [p] .Apply (ctx, args);
} outro {
ctx [p] = args+'';
}
retornar FNP;
};
} (p);
}
devolver novo fn;
};
window.xtendCanvas = xtendCanvas;
} ();
O método de uso é muito simples. Passe um objeto de tela e retornará um objeto semelhante ao context2d. Você pode usá -lo como o contexto comum2D, mas a diferença é que ele suporta a sintaxe da cadeia:
var cvs = document.getElementById ('cvs');
var ctx = xtendCanvas (cvs);
ctx.moveto (500,0) .lineto (500.500) .strokestyle ('#f00'). Stroke ();
Dessa forma, você pode colocar todas as operações em uma frase e interromper a qualquer momento, fazer outras coisas e continuar.
Esse código não é um aprimoramento da tela, ele simplesmente suporta a sintaxe da cadeia. Mas a vantagem é que há pouco código e pode ser incorporado em qualquer biblioteca JS. Espero receber uma recomendação de você aqui
Definitivamente, há algo que valha a pena melhorar no código, e todos podem melhorá -lo por conta própria. Mas - eu não esqueço de cavar poços quando desenho água. Espero que todos se lembrem de mim. O mais importante é a ideia, certo? Aqui está a ideia:
Como você pode ver, a parte mais longa do código é o Array Pro que salva o nome do método, e o código principal é realmente muito curto. Por que eu quero construir uma matriz dessas?
Originalmente, eu também queria herdar todos os métodos nativos diretamente do CanvasRanderingContext2D, mas cada navegador atravessou o CanvasRenderingContext2D, e os resultados eram inconsistentes. Se eu os herdar diretamente, quando você quiser usar o método no Chrome para executá -lo, será relatado um erro.
Então, eu apenas extraí os métodos comuns e não -objetivos e os nomes de atributos no CanvasRanderingContext2D. Não há como só criar uma matriz fixa - todos podem decidir adicionar seu método a ele.
Os métodos e atributos são extraídos e, em seguida, os métodos nativos são adicionados ao meu novo objeto. Eu construí uma função vazia chamada FN e coloquei meu método.
Como esses elementos da matriz têm funções e atributos, eu julguei no loop, seja uma função. Se for uma função, ele será executado com parâmetros; Se não for uma função - deve ser uma propriedade, então eu atribuo os parâmetros a esta propriedade.
Dessa forma, quando você encontra a definição do atributo Canvas, não precisa interromper o link, basta passar o valor do atributo como um parâmetro, por exemplo:
ctx.strokestyle ('#f00')
Finalmente, a chave é retornar FN. Esse truque foi aprendido com o jQuery e é a chave para suportar a sintaxe da cadeia.
Este parágrafo usa funções anônimas, fechamentos, protótipos e o estranho para os loops de que falei em artigos anteriores.
Parece bastante simples de dizer, mas pensei nisso há muito tempo, esperando que seja útil para todos.
Durante o processo de escrita, descobri que o Chrome está indo muito bem. Possui uma série de funções começando com o Set, como setstrokecolor, SetlineCap e outras funções. Ao transmitir parâmetros para eles, ele pode substituir os atributos correspondentes, como Strokestyle e LineCap. Em outras palavras, sua tela está cheia de funções e nenhum atributo, por isso não preciso julgar se é uma função ou um atributo. Mas não existe tal coisa no Firefox, então só posso usar as idéias anteriores.
Também vou divulgar essa série de funções definidas :var bak = ['setTransform', 'setAlpha', 'setComCoTeOperation', 'setLineWidth', 'SetLineCap', 'setLineJoin', 'setmiterlimit', 'setLinedash', 'setShadow', 'setstrokecolor', 'setFillColor'];
Eles podem entender seus usos rapidamente. Você também pode selecionar algumas matrizes Pro adicionadas ao código anterior.
Finalmente, estou me perguntando por que meu código não está destacado. . . Se você vir o fim, dê -me uma recomendação e deixe -me ser vaidoso.