TidBits

O efeito é o seguinte, pegar uma imagem e aplicar o efeito de blur usando somente javascript, sem carregar outra imagem.

Pra isso, é manipulado, pixel a pixel, colocando um pixel alpha por cima da imagem.

Veja a imagem original:

Imagem com filtro de Blur

Como a imagem é gerada automaticamente, dá pra aplicar o efeito no mousemove, ou em qualquer outra ação. Veja o exemplo abaixo.

Imagem com filtro de Blur no mousemove

Pro processamento ficar mais rápido, eu gerei um segundo canvas, só com pro efeito de criar a imagem dentro da máscara.

Todos os exemplos estão disponíveis aqui

Codando

O código é bem pequeno, fiz com menor número de linhas possíveis pra ficar bem legível.

html:

	<canvas id="pizza" width="400" height="400">
		Seu browser não suporta canvas
	</canvas>

javascript:

var Pizza = {

	// Configuração
	canvas:document.getElementById('pizza'),
	height:400,
	width:400,
	cor:'#293F8A',

	// Calculando variaveis pra desenhar
	_init:function(){
		Pizza.ctx = Pizza.canvas.getContext("2d");
		Pizza.radius = Math.min(Pizza.width, Pizza.height) / 2;
		Pizza.center_x = Pizza.width/2;
		Pizza.center_y = Pizza.height/2;
	},

	// Desenhando -  é só colocar Pizza._draw(60) pra desenhar
	// o gráfico com 60% de ocupação
	_draw:function(percentual){
		Pizza.ctx.clearRect(0,0,Pizza.width,Pizza.height);
		Pizza.ctx.beginPath();
		Pizza.ctx.moveTo(Pizza.center_x, Pizza.center_y);
		Pizza.ctx.arc(
			Pizza.center_x,
			Pizza.center_y,
			Pizza.radius,
			Math.PI * (- 0.5), // inicio da fatia
			Math.PI * (- 0.5 + 2 * percentual/100), // fim da fatia
			false
		);
		Pizza.ctx.closePath();
		Pizza.ctx.fillStyle = Pizza.cor;
		Pizza.ctx.fill();
	}
}
Pizza._init();

E por último, o drag, onde utilizo o jQuery UI, aí fica simples:

html:

	<div id="mascara_percentual">
		<span id="slider">drag<br/>me</span>
	</div>

javascript:

$('#slider').draggable({
	containment:'#mascara_percentual',
	drag:function() {
		var left = parseInt($(this).css('left').replace('px',''));
		var percentual = parseInt(left / 350 * 100);
		// (350 = 400 do width da mascara - 50 do width do slider)
		Pizza._draw(percentual);
	}
});

// Iniciando em 70%
$('#slider').css('left','70%'); // drag
Pizza._draw(70); // canvas

O Visual Studio, além de ser uma IDE mega pesada, tem um problema que gera intrigas entre equipes: ele abre por padrão uma função no JavaScript colocando a chave na linha de baixo.

Parece algo mínimo, mas irrita profundamente quem está acostumado a trabalhar da forma correta.

Porque forma correta? Simples, porque pode dar erro se colocar a chave na linha de baixo.

Pensem na função abaixo getUser que retorna um objeto em JavaScript

function getUser(){
	return {
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna um objeto

Se fosse pra deixar a chave embaixo, ficaria assim:

function getUser()
{
	return
	{
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna undefined

Só que há um problema: pelo fato do ponto e vírgula indicando quebra de linha ser no JavaScript ser opcional, o return não entende que é pra retornar um objeto e encerra a função ali, retornando undefined.

E tem um caso pior, que simplesmente dá erro de sintaxe:

function getPosition()
{
   return
   {
       top:32,
       left:50
   }
}
// dá erro "SyntaxError: Unexpected token :"

E se fosse feito com os braces na linha de cima, daria certo.

O incrível é que mesmo com esse argumento, tem programador que não dá o braço a torcer e insiste dizendo que JavaScript veio do java e no java se programa assim. ERRADO, JavaScript veio de Scheme e qualquer livro de Padrões em Javascript vai aconselhar abrir o bloco com a chave na linha de cima.

Dá pra configurar isso no Visual Studio 2010 (no 2008 deve dar também).

Trabalho em agência em publicidade e, em São Paulo, algumas delas respondem ao Sindicato dos Publicitários enquanto outras (normalmente com maior tempo de vida) respondem ao Sindicato dos Trabalhadores em Processamento de Dados e Tecnologia da Informação, o chamado SINDPD e essas sim sofrem.

Todo mês o SINDPD por regra fica com 30 reais do seu salário. E pra que isso não ocorra só tem uma forma: você tem que escrever uma carta num modelo que eles criam e trocam todo ano e levar pessoalmente duas cópias assinadas ao sindicato, em horário comercial obviamente e você só pode fazer isso nas duas primeiras semanas do ano (período em que normalmente pessoas felizes tiram férias). Se você não entregar até a segunda sexta feira do ano aí já era. No estilo “perdeu playboy” mesmo. Até dezembro você vai perder 30 reais todo mês por não ter levado a cartinha deles.

O processo todo é feito pra você não conseguir entregar o documento a eles. Afinal, é só pensar um pouco: Sindicato de Tecnologia da Informação ter que levar uma carta, pessoalmente, pra eles carimbarem, é ridículo. Qualquer programador podia fazer um sistema básico pra todo mundo poder autorizar ou não, de casa ou do trabalho, o dinheiro tomado por eles. Mas não, e são filas longas (ano passado eu perdi 2 horas e meia na fila que dava uma volta no quarteirão).Pra intimidar, eles colocam cerca de 30 seguranças pra não deixar ninguem “dar pitizinho”. E funciona assim: quanto mais gente voltar pro trabalho ao invés de perder meio dia de serviço pra entregar um papel, melhor (mais dinheiro) pro sindicato.

Além disso, no modelo da carta, é necessário colocar seu e-mail lá. Não vejo outro motivo pra eles ter seu e-mail a não ser vender a base, já que somos obrigados a ir pessoalmente lá.

Eu me recuso a deixar 330 reais na mão do sindicato ( 30 reais x 11 meses, em janeiro é cobrado de toda forma, levando cartinha ou não) e quem trabalhar em alguma empresa que também responde ao SINDPD deveria fazer o mesmo. O modelo da carta de 2012 está aqui.