var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
// atlas是地图集的意思,这里是一种资源,由png和json组成
game.load.atlas('atlas', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
game.load.image('hotdog', 'assets/sprites/hotdog.png');
}
var sprite;
function create() {
// 选择其中一张图片,greenJellyfish0000在assets/sprites/seacreatures_json.json中定义了
sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'atlas', 'greenJellyfish0000');
sprite.anchor.set(0.0);
// tint是色彩的意思
// sprite.tint = Math.random() * 0xffffff;
// game.input.onDown.add(changeTint, this);
// var canvas = sprite.tintedTexture|| PIXI.CanvasPool.create(this);
colortexture('phaserDude',sprite.texture,'#FFF');
// game.add.sprite(0,0,'phaserDude');
sprite.addChild(game.make.sprite(0, 0, 'phaserDude'));
}
function colortexture(key,texture, color)
{
var data = [];
var pixelWidth = 1;
var pixelHeight = 1;
var bmd = game.make.bitmapData();
var ctx = bmd.context;
var canvas = PIXI.CanvasPool.create(this);
var context = canvas.getContext("2d");
var crop = texture.crop;
canvas.width = crop.width;
canvas.height = crop.height;
context.globalCompositeOperation = "copy";
context.drawImage(texture.baseTexture.source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
var rgbValues = PIXI.hex2rgb(color);
var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
var pixelData = context.getImageData(0, 0, crop.width, crop.height);
var pixels = pixelData.data;
//寻找边界;如果上下左右 都不是全是透明度 也不是都不是全透明 并且当前像素也不是透明
for (var i = 0,x = 0, y = 0; i < pixels.length; i += 4,x += 1)
{
var alpha = pixels[i + 3];
var bottomIndex = canvas.width * 4 * (y + 1) +i%(canvas.width*4)+3;
var topIndex = canvas.width * 4 * (y - 1) +i%(canvas.width*4)+3;
var leftIndex = canvas.width * 4 * y +(i-1)%(canvas.width*4)+3;
var rightIndex = canvas.width * 4 * y +(i+1)%(canvas.width*4)+3;
var inner = true;
var outer = true;
//这个点不在边缘内部,他的四周透明度都不是0
if(pixels[bottomIndex] !== 0 || pixels[topIndex] !== 0 || pixels[leftIndex] == 0 || pixels[rightIndex] !== 0){
inner = false;
}
//当前点不在边缘外部,他周围的点如果有一个是透明的说明他不是
if(pixels[bottomIndex] === 0 || pixels[topIndex] === 0 || pixels[leftIndex] === 0 || pixels[rightIndex] === 0){
outer = false;
}
//当前的点既不在边缘外也不是边缘内,且不是透明的 说明是边
if(!inner && !outer && alpha !== 0){
ctx.fillStyle = color;
ctx.fillRect(x * pixelWidth, y * pixelHeight, pixelWidth, pixelHeight);
ctx.fillRect((x + 1) * pixelWidth, y * pixelHeight, pixelWidth, pixelHeight);
ctx.fillRect(x * pixelWidth, (y + 1) * pixelHeight, pixelWidth, pixelHeight);
ctx.fillRect((x - 1) * pixelWidth, y * pixelHeight, pixelWidth, pixelHeight);
ctx.fillRect(x * pixelWidth,( y - 1 )* pixelHeight, pixelWidth, pixelHeight);
}
if(x == canvas.width) {
y++;
x = 0;
}
}
return bmd.generateTexture(key);
}
function changeTint() {
sprite.tint = Math.random() * 0xffffff;
}
function update() {
// 旋转
// sprite.rotation += 0.02;
}
h5 canvas透明度图像边缘提取算法
最新推荐文章于 2022-06-29 20:25:30 发布