Titanium mobile ぼかす

すりガラス風にぼかす

https://github.com/benbahrenburg/Ti.BlurView を使う

Moduleの追加方法

1.
Help > Install Mobile Moduleを選択

URLを入力してからOKを押す。

2.
tiapp.xmlを開き、Modulesの項目の"+"ボタンを押し、追加 "1."で追加したModuleを選択。

Ti.BlurView (bencoding.blur)
iOS用
https://github.com/benbahrenburg/Ti.BlurView/blob/ea2f5b4b0c6fc08cc33760282a46e029caf0bc0e/iOS/dist/bencoding.blur-iphone-0.35.zip?raw=true
Android用
https://github.com/benbahrenburg/Ti.BlurView/blob/ea2f5b4b0c6fc08cc33760282a46e029caf0bc0e/android/dist/bencoding.blur-android-0.1.zip?raw=true

iOSのデモ

var mod = require('bencoding.blur');

var win = Ti.UI.createWindow({
    backgroundColor:'blue'
});

var bgView = Ti.UI.createView({
    height:Ti.UI.FILL, width:Ti.UI.FILL,
    backgroundImage:"default.png"
});
win.add(bgView);

var imgView = Ti.UI.createImageView({
    top:100, left:40, right:40, bottom:100
});
bgView.add(imgView);    

win.addEventListener('open',function(d){

    var img = mod.applyBlurTo({
        view: bgView,
        blurLevel:5, blurTintColor:"#9EDEB8",
        cropToRect:{
            x:imgView.rect.x,
            y:imgView.rect.y,
            width:imgView.rect.width,
            height:imgView.rect.height
        }
    });
    
    imgView.image = img;

    var container = Ti.UI.createView({
        backgroundColor:"#fff", borderRadius:20,
        top:100, height:150, left:40, right:40
    });
    imgView.add(container);
    var label = Ti.UI.createLabel({
        text:"Show how to blur like the yahoo weather app.", 
        color:"#000", width:Ti.UI.FILL, height:50, textAlign:"center"
    }); 
    container.add(label);   
});

win.open();

Android

var mod = require('bencoding.blur');

var win = Ti.UI.createWindow({
    backgroundColor:'white', title:"Image Blur Demo"
});

var imgblurredImage = mod.applyBlurTo({
    image:'/images/uho.png',
    blurRadius:20
});

var vwTest = Ti.UI.createImageView({
    width:Ti.UI.FILL, height:Ti.UI.FILL,
    image:imgblurredImage
});

win.add(vwTest);

win.open();

 

 

参考

https://github.com/benbahrenburg/Ti.BlurView