非公開 open2chOekakiEX Fork

  • /*
     * @title open2chOekakiEX
     * @description おーぷん2ちゃんお絵かき機能拡張ブックマークレット
     * @require https://googledrive.com/host/0B1BW1N6rqpWFNjdEazFaNm1XSjA/jquery-ui-1.10.4.custom.min.js
     * @require https://googledrive.com/host/0B1BW1N6rqpWFR2NCRFFUbmJzN0U/jquery-ui-1.10.4.custom.min.css
     * @require https://googledrive.com/host/0B1BW1N6rqpWFNjdEazFaNm1XSjA/spline.js
     * @require https://googledrive.com/host/0B1BW1N6rqpWFNjdEazFaNm1XSjA/other.js
     * @private
     */
    
    // 多重起動防止
    try{
        if(EXFlag) return;
    }catch(e){
        EXFlag = true;
    }
    
    //【更新履歴】
    var VERSION= 'Ver9.3.1';
    
    var PREVIEW_SIZE = 0.2;
    var MARGIN = 0;
    
    var settings = {
        version:      localStorage.getItem('version')      || 'Ver0.0.0',
        checkVersion: localStorage.getItem('checkVersion') || 1,
        saveType:     localStorage.getItem('saveType')     || 1,
        saveCycle:    localStorage.getItem('saveCycle')    || 10,
        saveMaxAge:   localStorage.getItem('saveMaxAge')   || 2,
        layerOn:      localStorage.getItem('layerOn')      || 1
    }
    var savedImages;
    
    var canvas = $('#sketch').sketch();
    var drawRedo = [];
    var layers = [];
    
    var scale;
    var realW;
    var realH;
    var scaleW;
    var scaleH;
    
    var icons = {
        rotateIcon:      'rotate2.png',
        curveIcon:       'curve.png',
        mojiIcon:        'moji.png',
        figureIcon:      'figure.png',
        selectionIcon:   'selection.png',
        saveIcon:        'save.png',
        settingsIcon:    'settings.png',
        rotateLeftIcon:  'rotateLeft.png',
        rotateRightIcon: 'rotateRight.png',
        reverseIcon:     'reverse.png',
        inverseIcon:     'inverse.png',
        reloadIcon:      'reload.png'
    };
    loadIcon(icons);
    
    var browser = checkBrowser();
    checkNewVersion();
    initMenu();
    initLayerTool();
    initManual();
    setCanvasScale();
    
    var drawTimer = '';
    var saveTimer = '';
    startAutoSave();
    
    
    function startAutoSave(){
        clearInterval(saveTimer);
    
        if(settings.saveCycle=='任意'){
           autoSave = false;
           saveTimer = '';
        }else{
           autoSave = true;
           saveTimer = setInterval(saveImage, settings.saveCycle * 60 * 1000);
        }
    }
    
    function checkNewVersion(){
        if(settings.checkVersion && settings.version != VERSION){
            localStorage.setItem('version', VERSION);
            alert(VERSION + ' ' + VERSION_INFO[VERSION].Date + '  ' + VERSION_INFO[VERSION].Info);
            alert('新しいブックマークレット(軽量版)を公開していますのでそちらへの移行をオススメします。詳細はお絵かきVIP版の開発スレッドの80レス目をご参照ください。');
        }
    }
    
    function saveSettings(){
        for(var key in settings){
            localStorage.setItem(key, settings[key]);
        }
        startAutoSave();
    }
    
    $('#saveButton').unbind();
    $('#saveButton').val('手動保存');
    $('#saveButton').click(function(){
        saveImage('manual');
        loadSavedImages();
    });
    
    function saveImage(type){
    console.log('saveImageStart');
    console.log('autoSave:' + autoSave + ' type:' + type);
        if(!autoSave && !type) return;
    
        var saveNum = parseInt(localStorage.getItem('saveNum')) + 1 || 1;
        if(saveNum > settings.saveMaxAge) saveNum = 1;
        localStorage.setItem('saveNum', saveNum);
    
        var name = makeFileName();
    
        var mergeCanvas = $('<canvas>').attr({
            width: realW,
            height: realH
        });
        var ctx = mergeCanvas[0].getContext('2d');
    
        var saveImages = [];
        $('canvas[id^=preview]').each(function(i){
            saveImages.push({
                name: name + '_layer' + (i+1),
                src: $(this)[0].toDataURL()
            });
    
            ctx.drawImage($(this)[0], 0, 0);
        });
        saveImages.unshift({
            name: name,
            src: mergeCanvas[0].toDataURL()
        });
        
        localStorage.setItem('savedImage' + saveNum, JSON.stringify(saveImages));
    console.log('saveImageEnd');
    }
    
    function makeFileName(){
        var date = new Date();
        var name = [
            date.getFullYear(),
            ('0' + (date.getMonth() + 1)).slice(-2),
            ('0' + date.getDate()).slice(-2)
        ].join( '-' ) + ' ' +
        ('0' + date.getHours()).slice(-2) + ':' +
        ('0' + date.getMinutes()).slice(-2) + ':' +
        ('0' + date.getSeconds()).slice(-2);
    
        return name;
    }
    
    function loadSavedImages(){
    console.log('loadImageStart');
        var loadImages = [];
    
        for(var i = 1; i <= settings.saveMaxAge; i++){
            var s = localStorage.getItem('savedImage' + i);
            var loadImage = JSON.parse(s);
            if(!loadImage) break;
            loadImages.push(loadImage);
        }
        if(!loadImages.length > 0) return;
    
        for(var i in loadImages){
            var m = parseInt(i) + 1;
            var tabName = loadImages[i][0].name.replace(/\_.*/, '');
            var loadImage = loadImages[i];
            $('#savedImage_' + m).remove();
            $('#savedImageTabList').append(
                $('<li>', {id: 'savedImage_' + m}).append($('<a>', {href: '#tab-saved-image-' + m, text: tabName.slice(0, 16)}))
            );
    
            $('#tab-saved-image-' + m).remove();
            $('#savedImageTab').append($('<div>', {id: 'tab-saved-image-' + m}));
            for(var j in loadImage){
                var a = $('<a>', {
                    id: 'downloadLink_' + loadImage[j].name,
                    download: loadImage[j].name + '.png',
                    href: loadImage[j].src,
                }).append(
                $('<img>', {
                    id: 'savedImage_' + loadImage[j].name,
                    src: loadImage[j].src,
                    title: loadImage[j].name,
                    style: ' border: solid ' + ((j==0)?'3pt #F00':'1pt') + ';' + 
                           ' width: ' + ((j==0)?realW-30:realW/3-10) + ';' +
                           ' background-image: url(http://open2ch.net/image/oekaki/background.png)'
                }));
                ($('#tab-saved-image-' + m)).append(a);
            }
        }
        $('#savedImageTab').tabs('refresh');
    console.log('loadImageEnd');
    }
    
    var blur = 0;
    var correctionLv = 8;
    var interval = 40;
    var interpolate = 4;
    var limA = -0.8;
    var showPointFlag = false;
    function initMenu(){
        $('[name=pmode]').hide();
    
        var menu = $('<div>', {id: 'menu'}).append(
            $('<ul>').append(
                $('<li>').append($('<a>', {href: '#tab-kaku'}).append($('label[for=kaku]'))),
                $('<li>').append($('<a>', {href: '#tab-curve'})),
                $('<li>').append($('<a>', {href: '#tab-kesu'}).append($('label[for=kesu]'))),
                $('<li>').append($('<a>', {href: '#tab-spoit'}).append($('label[for=spoit]'))),
                $('<li>').append($('<a>', {href: '#tab-fill'})),
                $('<li>').append($('<a>', {href: '#tab-moji'})),
                $('<li>').append($('<a>', {href: '#tab-figure'})),
                $('<li>').append($('<a>', {href: '#tab-selection'})),
                $('<li>').append($('<a>', {href: '#tab-save'}))
    //            $('<li>').append($('<a>', {href: '#tab-settings'}))
            ),
            $('<div>', {id: 'tab-kaku'}),
            $('<div>', {id: 'tab-curve'}),
            $('<div>', {id: 'tab-kesu'}),
            $('<div>', {id: 'tab-spoit'}),
            $('<div>', {id: 'tab-fill'}),
            $('<div>', {id: 'tab-moji'}),
            $('<div>', {id: 'tab-figure'}),
            $('<div>', {id: 'tab-selection'}),
            $('<div>', {id: 'tab-save'})
    //        $('<div>', {id: 'tab-settings'})
        ).tabs();
        $('#upImage').after(menu);
    
        makeMenuElement();
    }
    
    function makeMenuElement(){
        $('#_canvas').attr('style', 'position: relative');
    
        var scaleSize = [50, 75, 100, 125, 150, 200, 250, 300, 400, 500];
        var scaleSelect = $('<select>', {
            id: 'canvasScale',
            change: changeCanvasScale
        });
        for(var i in scaleSize){
            $('<option>', {
                value: scaleSize[i] / 100,
                text: scaleSize[i] + '%',
                selected: (i==2)?true:false
            }).appendTo(scaleSelect);        
        }
    
        $('#rotateLeftIcon')[0].style.display = '';
        $('#rotateRightIcon')[0].style.display = '';
        $('#reverseIcon')[0].style.display = '';
        $('#inverseIcon')[0].style.display = '';
        var rotateLeftButton = $('<button>', {
            id: 'rotateLeftButton',
            type: 'button',
            click: function(){rotateCanvas('rotate', -90)}
        }).append($('#rotateLeftIcon'));
        var rotateRightButton = $('<button>', {
            id: 'rotateRightButton',
            type: 'button',
            click: function(){rotateCanvas('rotate', 90)}
        }).append($('#rotateRightIcon'));
        var reverseButton = $('<button>', {
            id: 'reverseButton',
            type: 'button',
            click: function(){rotateCanvas('reverse')}
        }).append($('#reverseIcon'));
        var inverseButton = $('<button>', {
            id: 'inverseButton',
            type: 'button',
            click: function(){rotateCanvas('inverse')}
        }).append($('#inverseIcon'));
        $('#canvasSize')
            .after(inverseButton)    .after(reverseButton)
            .after(rotateRightButton).after(rotateLeftButton)
            .after(scaleSelect)      .after($('<b>').text('x'));
    
        var penType = ['ブラシ','鉛筆'];
        var penSelect = $('<select>', {id: 'penType'});
        for(var i in penType){
            $('<option>', {
                value: i,
                text: penType[i],
            }).appendTo(penSelect);    
        }
        var penSize = [0.5, 1, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 100];
        var penSizeSelect = $('#psize');
        penSizeSelect.children().remove();
        for(var i in penSize){
            $('<option>', {
                value: penSize[i],
                text: penSize[i],
                selected: (i==2)?true:false
            }).appendTo(penSizeSelect);
        }
    
        var curveImg = $('#curveIcon');
        curveImg[0].style.display = '';
        var corrections = [2, 4, 8, 16, 32, 64];
        var correctionLvText =  $('<b>', {text: '補正レベル:'});
        var correctionSelect = $('<select>', {
            id: 'correctionLv',
            change: function(){correctionLv = $(this).val();}
        });
        for(var i in corrections){
            $('<option>', {
                value: corrections[i],
                text: parseInt(i)+1,
                selected: (i==2)?true:false
            }).appendTo(correctionSelect);
        }
        var intervals = [5, 10, 20, 40, 80, 120, 160];
        var intervalText =  $('<b>', {text: ' 粒度:'});
        var intervalSelect = $('<select>', {
            id: 'interval',
            change: function(){interval = $(this).val();}
        });
        for(var i in intervals){
            $('<option>', {
                value: intervals[i],
                text: intervals[i],
                selected: (i==3)?true:false
            }).appendTo(intervalSelect);
        }
        var interpolates = [2, 4, 8, 12, 16];
        var interpolateText =  $('<b>', {text: ' なめらかさ:'});
        var interpolateSelect = $('<select>', {
            id: 'interpolate',
            change: function(){interpolate = $(this).val();}
        });
        for(var i in interpolates){
            $('<option>', {
                value: interpolates[i],
                text: interpolates[i],
                selected: (i==1)?true:false
            }).appendTo(interpolateSelect);
        }
        var controllPointText = $('<b>', {text: ' 制御点表示:'});
        var controllPointCheck = $('<input>', {
            id: 'controllPoint',
            type: 'checkbox',
            checked: showPointFlag,
            click: function(){showPointFlag = $(this)[0].checked}
        });
        var blurLevel = [0, 1, 2, 4, 8, 12, 16, 20];
        var blurText =  $('<b>', {text: ' ぼかし:'});
        var blurSelect = $('<select>', {
            id: 'blur',
            change: function(){blur = $(this).val();}
        });
        for(var i in blurLevel){
            $('<option>', {
                value: blurLevel[i],
                text: blurLevel[i],
                selected: (i==0)?true:false
            }).appendTo(blurSelect);
        }
        var curveOption = $('<div>', {id: 'curveOption'})
           .append(correctionLvText) .append(correctionSelect)
           .append(intervalText)     .append(intervalSelect)
           .append(interpolateText)  .append(interpolateSelect)
           .append(controllPointText).append(controllPointCheck) .append($('<br>'))
           .append(blurText)         .append(blurSelect);
        $('#tab-curve').append(curveOption);
        $('a[href=#tab-curve]').append(curveImg);
    
        var fillImg = $('<img>', {
            id: 'fillImg',
            src: 'http://image.open2ch.net/image/oekaki/nuri.png',
        });
        $('a[href=#tab-fill]').append(fillImg);
    
        var mojiImg = $('#mojiIcon');
        mojiImg[0].style.display = '';
        var mojiSize = [4, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 100];
        var mojiSizeText = $('<b>', {text: '文字サイズ:'});
        var mojiSizeSelect = $('<select>', {id: 'mojiSize'});
        for(var i in mojiSize){
            $('<option>', {
                value: mojiSize[i],
                text: mojiSize[i],
                selected: (i==7)?true:false
            }).appendTo(mojiSizeSelect);
        }
        var fontType = ['ゴシック','明朝','筆記体','装飾','等幅'];
        var fontTypeText = $('<b>', {text: ' フォント:'});
        var fontTypeSelect = $('<select>', {id: 'mojiFont'});
        for(var i in fontType){
            $('<option>', {
                value: i,
                text: fontType[i],
            }).appendTo(fontTypeSelect);    
        }
        var boldText = $('<b>', {text: ' B:'});
        var boldCheck = $('<input>', {
            id: 'mojiBold',
            type: 'checkbox',
            value: 'bold'
        });
        var italicText = $('<i>', {text: ' I:'});
        var italicCheck = $('<input>', {
            id: 'mojiItalic',
            type: 'checkbox',
            value: 'italic'
        });
        var mojiOption = $('<div>', {id: 'mojiOption'})
            .append(mojiSizeText).append(mojiSizeSelect)
            .append(fontTypeText).append(fontTypeSelect)
            .append(boldText)    .append(boldCheck)
            .append(italicText)  .append(italicCheck);
        $('#tab-moji').append(mojiOption);
        $('a[href=#tab-moji]').append(mojiImg);
    
        var figureImg = $('#figureIcon');
        figureImg[0].style.display = '';
        $('a[href=#tab-figure]').append(figureImg);
    
        var figureType = ['-','□','■','○','●'];
        var figureTypeText = $('<b>', {text: '図形:'});
        var figureTypeSelect = $('<select>', {id: 'figureType'});
        for(var i in figureType){
            $('<option>', {
                value: i,
                text: figureType[i],
            }).appendTo(figureTypeSelect);    
        }
        var figureOption = $('<div>', {id: 'figureOption'})
            .append(figureTypeText).append(figureTypeSelect);
        $('#tab-figure').append(figureOption);
    
        var selectionImg = $('#selectionIcon');
        selectionImg[0].style.display = '';
        var selectionTypeText = $('<b>', {text: '動作:'});
        var selectionType = ['切り取り','コピー'];
        var selectionTypeSelect = $('<select>', {id: 'selectionType'});
        for(var i in selectionType){
            $('<option>', {
                value: i,
                text: selectionType[i],
            }).appendTo(selectionTypeSelect);    
        }
        var selectionOption = $('<div>', {id: 'selectionOption'})
            .append(selectionTypeText).append(selectionTypeSelect);
        $('#tab-selection').append(selectionOption);
        $('a[href=#tab-selection]').append(selectionImg);
    
        var saveImg = $('#saveIcon');
        saveImg[0].style.display = '';
        var saveMaxAgeText = $('<b>', {text: '保存数:'});
        var saveMaxAge = [1, 2, 3];
        var saveMaxAgeSelect = $('<select>', {
            id: 'saveMaxAge',
            change: function(){
               settings.saveMaxAge = $(this).val();
               saveSettings();
            }
        });
        for(var i in saveMaxAge){
            $('<option>', {
                value: saveMaxAge[i],
                text: saveMaxAge[i],
                selected: (saveMaxAge[i]==settings.saveMaxAge)?true:false,
            }).appendTo(saveMaxAgeSelect);    
        }
        var saveCycleText = $('<b>', {text: ' 間隔:'});
        var saveCycle = ['任意', '1', '3', '5', '10', '15', '20', '30'];
        var saveCycleSelect = $('<select>', {
            id: 'saveCycle',
            change: function(){
               settings.saveCycle = $(this).val();
               saveSettings();
            }
        });
        for(var i in saveCycle){
            $('<option>', {
                value: saveCycle[i],
                text: saveCycle[i] + ((i==0)? '':'分'),
                selected: (saveCycle[i]==settings.saveCycle)?true:false,
            }).appendTo(saveCycleSelect);    
        }
        var saveOption = $('<div>', {id: 'saveOption'})
            .append(saveMaxAgeText).append(saveMaxAgeSelect)
            .append(saveCycleText).append(saveCycleSelect);
        $('#tab-save').append(saveOption);
        $('a[href=#tab-save]').append(saveImg);
    
        var reloadImg = $('#reloadIcon');
        reloadImg[0].style.display = '';
        var savedImageTab = $('<div>', {id: 'savedImageTab'}).append(
            $('<ul>', {id: 'savedImageTabList'}).append(
                $('<li>').append($('<a>', {
                    href: '#tab-saved-image-reload', 
                    click: loadSavedImages
                }).append(reloadImg))
            ),
            $('<div>', {id: 'tab-saved-image-reload'})
        ).tabs();
        $('#tab-save').append(savedImageTab);
    
        var curveA     = $('<a>', {href: '#sketch', 'data-tool': 'curve'});
        var mojiA      = $('<a>', {href: '#sketch', 'data-tool': 'moji'});
        var fillA      = $('<a>', {href: '#sketch', 'data-tool': 'fill'});
        var figureA    = $('<a>', {href: '#sketch', 'data-tool': 'figure'});
        var selectionA = $('<a>', {href: '#sketch', 'data-tool': 'selection'});
        var saveA      = $('<a>', {href: '#sketch', 'data-tool': 'save'});
        var settingsA  = $('<a>', {href: '#sketch', 'data-tool': 'settings'});
        $('.tools').after(curveA).after(fillA).after(mojiA).after(figureA)
                   .after(selectionA).after(saveA).after(settingsA);
    
        $('a[href=#tab-kaku]')     .click(function(){$('[data-tool=marker]').click()});
        $('a[href=#tab-curve]')    .click(function(){$('[data-tool=curve]').click()});
        $('a[href=#tab-kesu]')     .click(function(){$('[data-tool=eraser]').click()});
        $('a[href=#tab-spoit]')    .click(function(){$('[data-tool=spoit]').click()});
        $('a[href=#tab-moji]')     .click(function(){$('[data-tool=moji]').click()});
        $('a[href=#tab-fill]')     .click(function(){$('[data-tool=fill]').click()});
        $('a[href=#tab-figure]')   .click(function(){$('[data-tool=figure]').click()});
        $('a[href=#tab-selection]').click(function(){$('[data-tool=selection]').click()});
        $('a[href=#tab-save]')     .click(function(){
            $('[data-tool=save]').click();
            $('a[href=#tab-saved-image-reload]').click();
            autoSave = false;
        });
        $('a[href=#tab-settings]') .click(function(){$('[data-tool=settings]').click()});
        $('[data-tool]').click(function(){
            fixPreview();
            autoSave = (settings.saveCycle=='任意')?false:true;
        });
    
        var goButton = $('<input>', {
            type: 'button',
            value: '進',
            id: 'goButton',
            click: function(){
                changeAction(drawRedo, canvas.actions);
                canvas.redraw();
            }
        });
        $('#backButton').after(goButton);
    
        var downloadButton = $('<button>', {
            id: 'downloadButton',
            type: 'button',
            text: 'ダウンロード',
            click: function(){
                var mergeCanvas = $('<canvas>').attr({
                    width: realW,
                    height: realH
                });
                mergeLayer(mergeCanvas[0]);
                var link = document.createElement('a');
                link.download = makeFileName() + ".png";
                link.href = mergeCanvas[0].toDataURL();
                link.click();
            }
        });
        $('#saveButton').before(downloadButton);
    
        var exportButton = $('<input>', {
            id: 'exportButton',
            type: 'button',
            value: '出力'
        });
        var importButton = $('<input>', {
            id: 'importButton',
            type: 'button',
            value: '再生'
        });
        //$('#saveButton').after(importButton).after(exportButton);
    
        importButton.click(function(){
           playback(stringToAction(colorToActionString()), 10);
        });
        exportButton.click(function(){
            actionStringToColor(actionToString());
        });
    
        var tmpCanvas = $('<canvas>').attr({
            id: 'tmpCanvas',
            width: canvas.el.width,
            height: canvas.el.height,
            style: 'position:absolute; z-index:-1'
        });
        $('#sketch').before(tmpCanvas);
        tmpCanvas.bind("mousedown", function(){
            isOekakiDone = 1;
        });
    
        var layerTool = $('<div>', {
            id: 'layerTool',
            align: 'left',
            style: 'background:#ccc;padding:2px;font-size:9pt'
        });
        var layerText = $('<b>', {text: '[レイヤ]:'});
    
        var mergeLayerButton = $('<input>', {
            id: 'mergeLayerButton',
            type: 'button',
            value: '結合',
            click: function(){mergeLayer(canvas)}
        });
        $('#_canvas').after(layerTool);
    //    layerTool.append(mergeLayerButton);
    }
    
    function initLayerTool(){
        var layerTool = $('#layerTool');
        
        var addLayerButton = $('<input>', {
            id: 'addLayerButton',
            type: 'button',
            value: '追加',
            click: function(){addLayer()}
        });
        
        var displayButton= $('<input>', {
            id: 'displayButton',
            type: 'button',
            value: '表示',
            click: function(){changeDisplay()}
        });
       
        var changeLayerLeftButton= $('<input>', {
            id: 'changeLayerLeftButton',
            type: 'button',
            value: '←',
            click: function(){changeLayer(canvas.layerNum-1)}
        });
        
        var changeLayerRightButton = $('<input>', {
            id: 'changeLayerRightButton',
            type: 'button',
            value: '→',
            click: function(){changeLayer(canvas.layerNum+1)}
        });
        
        var mergeLayerButton = $('<input>', {
            id: 'mergeLayerButton',
            type: 'button',
            value: '結合',
            click: function(){mergeLayer()}
        });
        
        var previewBox = $('<div>', {
            id: 'previewBox',
            align: 'left'
        });
    
        layerTool
        .append(addLayerButton)
        .append(displayButton)
        .append(changeLayerLeftButton)
        .append(changeLayerRightButton)
    //    .append(mergeLayerButton)
        .append(previewBox);
    
        initLayer();
    }
    
    function initManual(){
        $('#layerTool').next().css('background', '#ddd');
        $('#layerTool').next().children().html(manual);
    }
    
    function initLayer(){
        createLayer();
        layers.push({
            actions:[]
        });
        $('#layerCanvas0')[0].style.backgroundImage = 'url(http://open2ch.net/image/oekaki/background.png)';
        sketch.style.backgroundImage='none';
        
        createLayer();
        createPreview();
        layers.push({
            canvas:$('#layerCanvas1')[0],
            context:$('#layerCanvas1')[0].getContext('2d'),
        //    bgcolor:canvas.bgcolor,
            bgcolor:'rgba(0, 0, 0, 0)',
            baseImageURL:canvas.baseImageURL,
            actions:canvas.actions
        });
        canvas.layerNum = 1;
        canvas.actions = [];
        canvas.bgcolor = 'rgba(0, 0, 0, 0)';
        canvas.baseImageURL = '';
        canvas.baseImageCache = '';
        canvas.redraw();
        
        canvas.el = layers[1].canvas;
        canvas.baseImageURL = layers[1].baseImageURL;
        canvas.baseImageCache = '';
        canvas.actions = layers[1].actions;
        updatePreview();
        selectLayer(canvas.layerNum);
    }
    
    function createLayer(){
        var layerCanvas = $('<canvas>').attr({
            id: 'layerCanvas' + layers.length,
            width: canvas.el.width,
            height: canvas.el.height,
            style: 'position:absolute; z-index:' + (layers.length-100)
        });
        $('#sketch').before(layerCanvas);
    }
    
    function createPreview(){
        var preview = $('<canvas>').attr({
            id: 'preview' + (layers.length),
            width: canvas.el.width,
            height: canvas.el.height,
            value: layers.length,
            style: 'border:1pt solid #999; background-image:url(http://open2ch.net/image/oekaki/background.png); width:' + canvas.el.width * PREVIEW_SIZE + '; height:' + canvas.el.height * PREVIEW_SIZE,
        });
        preview.click(function(){selectLayer(preview[0].value)});
        preview[0].displayed = true;
        $('#previewBox').append(preview);
    }
    
    function selectLayer(newLayerNum){
        var oldLayerNum = canvas.layerNum;
        $('canvas[id^=preview]').each(function(i){
            if((i+1) == newLayerNum){
                if(this.displayed){
                    $(this).css('border', '2pt solid #D33');
                }else{
                    $(this).css('border', '2pt solid #DAA');
                }
                this.selected = true;
            }else{
                if(this.displayed){
                    $(this).css('border', '2pt solid #777');
                }else{
                    $(this).css('border', '2pt solid #BBB');
                }
                this.selected = false;
            }
        });
        canvas.layerNum = newLayerNum;
        layers[oldLayerNum].actions = canvas.actions;
        layers[oldLayerNum].bgcolor = canvas.bgcolor;
        layers[oldLayerNum].baseImageURL = canvas.baseImageURL;
        layers[oldLayerNum].baseImageCache= canvas.baseImageCache;
        canvas.el = layers[newLayerNum].canvas;
        canvas.bgcolor = layers[newLayerNum].bgcolor;
        canvas.baseImageURL = layers[newLayerNum].baseImageURL;
        canvas.baseImageCache = layers[newLayerNum].baseImageCache;
        canvas.actions = layers[newLayerNum].actions;
        canvas.redraw();    
    //    updatePreview();
    }
    
    function updatePreview(){
        var preview = $('#preview' + canvas.layerNum)[0];
        var context = preview.getContext('2d');
        var imageData = canvas.context.getImageData(0, 0, canvas.el.width, canvas.el.height);
        context.putImageData(imageData, 0, 0);
    }
    
    function updateAllPreview(){
        var nowLayerNum = canvas.layerNum;
        jQuery.each(layers, function(i, layer){
            if(i){
                selectLayer(i);
                updatePreview();
            }
        });
        selectLayer(nowLayerNum);
    }
    
    function addLayer(){
        var oldLayerNum = canvas.layerNum;
    
        createLayer();
        createPreview();
    
        layers.push({
            canvas:$('#layerCanvas' + (layers.length))[0],
            context:$('#layerCanvas' + (layers.length))[0].getContext('2d'),
            bgcolor:'rgba(0, 0, 0, 0)',
            actions:[]
        });
        var newLayerNum = layers.length-1;
        canvas.layerNum = newLayerNum;
        layers[oldLayerNum].baseImageURL = canvas.baseImageURL;
        layers[oldLayerNum].bgcolor = canvas.bgcolor;
        layers[oldLayerNum].actions = canvas.actions;
        canvas.el = layers[newLayerNum].canvas;
        canvas.baseImageURL = layers[newLayerNum].baseImageURL;
        canvas.bgcolor = layers[newLayerNum].bgcolor;
        canvas.actions = layers[newLayerNum].actions;
        canvas.redraw();
        updatePreview();
        selectLayer(newLayerNum);
    }
    
    function changeLayer(newLayerNum){
        if(newLayerNum <= 0 || newLayerNum > layers.length-1) return;
    
        var oldLayerNum = canvas.layerNum;
    
        var tmpZIndex = layers[oldLayerNum].canvas.style.zIndex;
        layers[oldLayerNum].canvas.style.zIndex = layers[newLayerNum].canvas.style.zIndex;
        layers[newLayerNum].canvas.style.zIndex = tmpZIndex;
    
        var tmpLayer = layers[oldLayerNum];
        layers[oldLayerNum] = layers[newLayerNum];
        layers[newLayerNum] = tmpLayer;
        canvas.actions = layers[oldLayerNum].actions;
    
        var oldCtx = $('#preview' + oldLayerNum)[0].getContext('2d');
        var newCtx = $('#preview' + newLayerNum)[0].getContext('2d');
        var oldImageData = oldCtx.getImageData(0, 0, canvas.el.width, canvas.el.height);
        var newImageData = newCtx.getImageData(0, 0, canvas.el.width, canvas.el.height);
        oldCtx.putImageData(newImageData, 0, 0);
        newCtx.putImageData(oldImageData, 0, 0);
    
        var tmpPreviewDisplayed = $('#preview' + oldLayerNum)[0].displayed;
        $('#preview' + oldLayerNum)[0].displayed = $('#preview' + newLayerNum)[0].displayed;
        $('#preview' + newLayerNum)[0].displayed = tmpPreviewDisplayed;
    
        canvas.el = layers[oldLayerNum].canvas;
        canvas.bgcolor = layers[oldLayerNum].bgcolor;
        canvas.baseImageURL = layers[oldLayerNum].baseImageURL;
        canvas.baseImageCache = '';
        selectLayer(newLayerNum);
    }
    
    function changeDisplay(){
        $('canvas[id^=preview]').each(function(i){
            if(this.selected){
                if(this.displayed){
                    $(this).css('border', '2pt solid #D99');
                    layers[i+1].canvas.style.display = 'none';
                    this.displayed = false;
                }else{
                    $(this).css('border', '2pt solid #D33');
                    layers[i+1].canvas.style.display = '';
                    this.displayed = true;
                }
            }
        });
    }
    
    function deleteLayer(layerNum){
        $('canvas[id^=preview]').each(function(i){
            if(i == layerNum){
                selectLayer(layerNum);
                $(this).remove();
                $(layers[i+1].canvas).remove();
                layers.splice(i+1, 1);
            }
        });
    }
    
    function mergeLayer(mergeCanvas){
        if(settings.layerOn){
            updatePreview();
            var context = mergeCanvas.getContext('2d');
            context.clearRect(0, 0, realW, realH);
    
            $('canvas[id^=preview]').each(function(i){
                if(this.displayed){
                    context.drawImage($(this)[0], 0, 0, realW, realH);
                }
            });
        }
    };
    
    $.sketch.tools.curve = {
        onEvent: function(e) {
            switch (e.type) {
                case 'mousedown':
                case 'touchstart':
                    startCurvePainting(e);
                    break;
                case 'mouseup':
                case 'mouseout':
                case 'mouseleave':
                case 'touchend':
                case 'touchcancel':
                    stopCurvePainting(e);
            }
            if (this.painting) {
                setPoint(e);
    
                var p = getPosition(e);
                canvas.action.events.push({
                    x: p.x,
                    y: p.y
                });
                return this.redraw();
            }
        },draw: function(action) {
            var event, previous, _i, _len, _ref;
            this.context.lineJoin = "round";
            this.context.lineCap = "round";
            this.context.shadowBlur = action.blur;
            this.context.shadowColor = action.color;
            this.context.beginPath();
            this.context.moveTo(action.events[0].x, action.events[0].y);
            _ref = action.events;
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                event = _ref[_i];
                this.context.lineTo(event.x, event.y);
                previous = event;
            }
            this.context.strokeStyle = action.color;
            this.context.lineWidth = action.size;
            this.context.stroke();
        }
    };
    
    function startCurvePainting(e){
        try{
            if(drawTimer){
                clearInterval(drawTimer);
                drawTimer= '';
            }
            canvas.painting = true;
            canvas.action = {
                tool: canvas.tool,
                color: canvas.color,
                size: canvas.size,
                blur: blur,
                events: [],
                points: []
            }
            setPoint(e);
            getPoint();
            drawTimer = setInterval(getPoint, interval);
        }catch(ex){
            console.log('Exception' + ex);
            stopCurvePainting(e);
        }
    }
    
    function stopCurvePainting(e){
        setPoint(e);
        if (canvas.action){
            var fp = getFuturePoint(canvas.action.points);
            var ss = splineStream(fp, interpolate);
            canvas.action.events = ss;
            canvas.actions.push(canvas.action);
        }
        clearInterval(drawTimer);
        drawTimer = '';
        canvas.painting = false;
        canvas.action = null;
        
        var wait = 0;
        if(showPointFlag){
            wait = 1000;
        }
        setTimeout(function(){
            canvas.redraw();
            updatePreview();
        }, wait);
    }
    
    var position = {x: 0, y: 0}
    function getPoint(){
        var point = {
            x: position.x,
            y: position.y
        }
        canvas.action.points.push(point);
    }
    
    function setPoint(e){
        var p = getPosition(e);
        position.x = p.x;
        position.y = p.y;
    }
    
    function getFuturePoint(points){
        showPoints(points, 'rgb(255,0,0)', 1);
    
        var p0 = points[0];
        var fp = [p0];
        var c = 0;
    
        for(var i = 1; i < points.length-1; i++){
            var p1 = points[i];
            var dx1 = p0.x - p1.x;
            var dy1 = p0.y - p1.y;
            var dr = Math.pow(dx1, 2) + Math.pow(dy1, 2);
            
            if(dr > Math.pow(correctionLv, 2) || c > interpolate * 100 / interval){
                p0 = p1;
                fp.push(p0);
                c = 0;
            }else{
                var p2 = points[i+1];
                var dx2 = p2.x - p1.x;
                var dy2 = p2.y - p1.y;
                var dc = (dx1*dx2 + dy1*dy2) / Math.sqrt((Math.pow(dx1, 2)+Math.pow(dy1, 2))*(Math.pow(dx2, 2)+Math.pow(dy2, 2)));
    //console.log(dc);
                if(dc > limA){
                    p0 = p1;
                    fp.push(p0);
                    c = 0;
                }else if(dr > 0){
                    //c++;
                }
            }
        }
    
        var endPoint = points[points.length-1];
        var endFp = fp[fp.length-1];
        if(endPoint.x != endFp.x || endPoint.y != endFp.y){
            fp.push(endPoint);
        }
        
        showPoints(fp, 'rgb(0,255,0)', 3);
        return fp;
    }
    
    function showPoints(points, color, r){
        if(!showPointFlag) return;
    
        for(var i = 0; i < points.length; i++){
            var point = points[i];
            canvas.context.lineWidth = 2;
            canvas.context.beginPath();
            canvas.context.strokeStyle = color;
            canvas.context.arc(point.x, point.y, r, 0, Math.PI*2, false);
            canvas.context.stroke();
        }
    }
    
    
    var fillCanvas;
    var seeds;
    $.sketch.tools.fill= {
        onEvent: function(e) {
          switch (e.type) {
            case 'mousedown':
            case 'touchstart':
              fill(e);
            break;
          }
        },
        draw: function(action){
            if(!action.fill && canvas.filling){
                return;
            }else if(!action.fill && !canvas.filling){
                canvas.filling = true;
    
                fillCanvas = canvas.context.getImageData(0, 0, canvas.el.width, canvas.el.height);
                var fillColor = action.fillColor;
                var targetColor = getRGBA(action.x, action.y);
                seeds = [{
                     'x':Number(action.x),
                     'y':Number(action.y)
                }];
        
                //var start = new Date();
                while(seeds.length > 0){
                   var seed = seeds.shift();
                    paint(seed.x, seed.y, fillColor, targetColor);
                }
                //var end = new Date();
                //console.log(end - start + 'msec');
                
                action.fill = fillCanvas;
                canvas.filling = false;
            }
            canvas.context.putImageData(action.fill, 0, 0);
        }
    }
    
    function fill(e){
        var pos = getPosition(e);
    
        var fillRGBA = canvas.color.match(/(\d|\.)+/g);
        var alpha;
        if(fillRGBA[3] == undefined){
            alpha = 255;
        }else{
            alpha = alphaToInt(fillRGBA[3]);
        }
        var fillColor = ((Number(fillRGBA[0]) << 24) + (Number(fillRGBA[1]) << 16) + (Number(fillRGBA[2]) << 8) + alpha)>>>0;
    
        canvas.actions.push({
            x: Math.floor(pos.x),
            y: Math.floor(pos.y),
            tool: canvas.tool,
            fillColor: fillColor
        });
    
        canvas.redraw();
        if(settings.layerOn) updatePreview();
    }
    
    function paint(x, y, fillColor, targetColor){
        var color = getRGBA(x, y);
        if(color == fillColor) return;
    
        fillRGBA(x, y, fillColor);
        
        var rightX = x + 1;
        while(rightX < fillCanvas.width){
            var color = getRGBA(rightX, y);
            if(color == targetColor){
                fillRGBA(rightX, y, fillColor);
            }else{
                break;
            }
            rightX++;
        }
        
        var leftX = x - 1;
        while(leftX >= 0){
            var color = getRGBA(leftX, y);
            if(color == targetColor){
                fillRGBA(leftX, y, fillColor);
            }else{
                break;
            }
            leftX--;
        }
        
        if(y -1 >= 0){
            scanSeed(leftX, rightX, y-1, targetColor);
        }
        if(y + 1 < fillCanvas.height){
            scanSeed(leftX, rightX, y+1, targetColor);
        }
    }
    
    function scanSeed(leftX, rightX, y, targetColor){
        var seed = false;
    
        for(var x = leftX + 1; x < rightX; x++){
            var color = getRGBA(x, y);
            if(color == targetColor){
                seed = true;
            }else if(seed){
                seeds.push({"x":x - 1, "y":y});
                seed = false;
            }
        }
        if(seed){
            seeds.push({"x":rightX - 1, "y":y});
        }
    }
    
    function fillRGBA(x, y, color) {
        var img = fillCanvas.data;
        var w = fillCanvas.width;
        var h = fillCanvas.height;
        var p = ((w * y) + x) * 4;
        img[p]   = (color & 0xFF000000) >>> 24;
        img[p+1] = (color & 0xFF0000) >> 16;
        img[p+2] = (color & 0xFF00) >> 8;
        img[p+3] = color & 0xFF;
    }
    
    function fillRGB(x, y, color) {
        var img = fillCanvas.data;
        var w = fillCanvas.width;
        var h = fillCanvas.height;
        var p = ((w * y) + x) * 4;
        img[p]   = (color & 0xFF0000) >> 16;
        img[p+1] = (color & 0xFF00) >> 8;
        img[p+2] = color & 0xFF;
        img[p+3] = 0xFF;
    }
    
    function getRGBA(x, y){
        var img = fillCanvas.data;
        var w = fillCanvas.width;
        var h = fillCanvas.height;
        var p = ((w * y) + x) * 4;
        return ((img[p] << 24) + (img[p+1] << 16) + (img[p+2] << 8) + img[p+3])>>>0;
    }
    
    function getRGB(x, y){
        var img = fillCanvas.data;
        var w = fillCanvas.width;
        var h = fillCanvas.height;
        var p = ((w * y) + x) * 4;
        return ((img[p] << 16) + (img[p+1] << 8) + (img[p+2]));
    }
    function getRGBAString(color){
        return 'rgba('
        + (color & 0xFF000000) >>> 24 + ', ' 
        + (color & 0xFF0000) >> 16 + ', '
        + (color & 0xFF00) >> 8 + ', '
        + (color & 0xFF) + ')';
    }
    
    function getRGBString(color){
        return 'rgb('
        + ((color & 0xFF0000) >> 16) + ', '
        + ((color & 0xFF00) >> 8) + ', '
        + (color & 0xFF) + ')';
    }
    function alphaToInt(floatAlpha){
        return parseInt(Number(floatAlpha * 255));
    }
    
    function alphaToFloat(intAlpha){
        return parseFloat(intAlpha / 255 * 100) * 100;
    }
    
    
    $.sketch.tools.moji = {
        onEvent: function(e) {
            switch (e.type) {
                case 'mousedown':
                case 'touchstart':
                    makeText(e);
                    break;
            }
        },
        draw: function(action){
            fillText(canvas.context, action);
        }
    }
    
    function makeText(e){
        if(canvas.preview){
            fixPreview();
            return;
        }
    
        var text = window.prompt("文字を入力。", "");
        if(!text) return;
    
        var str = text.match(/^(kyaha!|\:v|\!)(.*)/i);
        var mode = '';
        if(str != null){
            var mode = str[1];
            var text = str[2];
        }
        str = text.match(/^(?:usa|\[)(.*)(?:min|\])(.*)/i);
        var mojiFont;
        if(str != null && str[1] != null){
            mojiFont = str[1];
            text = str[2];
        }else{
            var fontFamily = ['sans-serif','serif','cursive','fantasy','monospace'];
            mojiFont =  fontFamily[$('#mojiFont').val()];
        }
        text = text.replace(/nana|\\n/g, "\n");
        if(!text) return;
        
        var mojiSize = $('#mojiSize').val();
        
        if($('#mojiBold:checked').val()){
           var mojiBold = $('#mojiBold:checked').val() + ' ';
        }else{
           var mojiBold = ' ';
        }
        
        if($('#mojiItalic:checked').val()){
           var mojiItalic = $('#mojiItalic:checked').val() + ' ';
        }else{
           var mojiItalic = ' ';
        }
    
        var pos = getPosition(e);
    
        canvas.preview = {
            x: pos.x,
            y: pos.y,
            deg: 0,
            tool: canvas.tool,
            color: canvas.color,
            font: mojiBold + mojiItalic + mojiSize + 'px ' + mojiFont + '',
            mode: mode,
            text: text
        };
    
        var tmpCtx = $('#tmpCanvas')[0].getContext('2d');
        var tmpSize = fillText(tmpCtx, canvas.preview);
        movePreview(tmpCtx, canvas.preview, tmpSize);
    }
    
    function fillText(context, action){
        context.fillStyle = action.color;
        context.font = action.font;
        context.textBaseline = 'top';
    
        var lines = action.text.split('\n');
        var size = measureTextAreaSize(context, action, lines);
        var deg = action.deg;
        if(action.reverse) deg *= -1;
        if(action.inverse) deg *= -1;
        context.translate(action.x + size.w/2, action.y + size.h/2);
        context.rotate(deg * Math.PI/180);
        if(action.reverse) context.scale(-1, 1);
        if(action.inverse) context.scale(1, -1);
    
        var h = context.measureText("あ").width;
        jQuery.each(lines, function(i, line) {
            if(!action.mode){
                context.textAlign = 'left'
                context.fillText(line, -size.w/2, -size.h/2 + h*i);
            }else{
                jQuery.each(line, function(j, char){
                    context.textAlign = 'center';
                    context.fillText(char, -size.w/2 - h*i, -size.h/2 + h*j);
                });
            }
        });
    
        context.setTransform(1,0,0,1,0,0);
        return size;
    }
    
    function measureTextAreaSize(context, action, lines){
        var h = context.measureText("あ").width;
        var maxW = 0;
        var maxH = 0;
        jQuery.each(lines, function(i, line) {
            if(!action.mode){
                var w = context.measureText(line).width;
                if(w > maxW){maxW = w;}
                maxH = h * (i+1);
            }else{
                jQuery.each(line, function(j, char){
                    if(h * (j+1) > maxH){maxH = h * (j+1)};
                });
                maxW = h * (i+1);
            }
        });
    
        return {w: maxW, h: maxH}
    }
    
    function movePreview(context, preview, size){
        var top = preview.y * scale;
        var left = !preview.mode ? preview.x * scale - MARGIN : preview.x * scale - size.w*3/4 + MARGIN;
        var border = 2;
    
        var moveCanvas = $('<canvas>').attr({
            id: 'moveCanvas',
            width: size.w + MARGIN,
            height: size.h + MARGIN,
            style: 'border:' + border + 'pt dotted #666; position:absolute; ' + 
                   'top: ' + (top - (MARGIN + border)/2) + '; ' + 
                   'left: ' + (left - (MARGIN + border)/2) + '; ' + 
                   'width: ' + size.w * scale + '; ' + 
                   'height: ' + size.h * scale + '; ' + 
                   'z-index:10; cursor: move'
        });
    
        var tmpImg = context.getImageData(left/scale, top/scale, size.w + MARGIN, size.h + MARGIN);
        context.clearRect(0, 0, canvas.el.width, canvas.el.height);
        moveCanvas[0].getContext('2d').putImageData(tmpImg, 0, 0);
        $('#sketch').before(moveCanvas);
    
        var rotateImg = $('#rotateIcon')[0];
        var rotateCanvas = $('<canvas>').attr({
            id: 'rotateCanvas',
            width: rotateImg.width,
            height: rotateImg.height,
            style: 'position:absolute; ' + 
                   'top: ' + ((top - (MARGIN + border)/2) - rotateImg.height) + '; ' + 
                   'left: ' + ((left - (MARGIN + border)/2) + moveCanvas.width()/2 - rotateImg.width/2) + '; ' + 
                   'z-index:11; cursor:pointer;'
        });
        rotateCanvas[0].getContext('2d').drawImage(rotateImg, 0, 0, rotateImg.width, rotateImg.height);
        if(!canvas.selection){$('#sketch').before(rotateCanvas);}
    
        var startMove = function(e){
            pos = getPosition(e.originalEvent);
            canvas.move = {
                x: pos.x,
                y: pos.y,
                dx: pos.x - this.style.left.replace('px', ''),
                dy: pos.y - this.style.top.replace('px', '')
            }; 
        }
        var endMove = function(e){
            if(!canvas.move) return;
    
            var pos = getPosition(e.originalEvent);
            preview.x += pos.x - canvas.move.x;
            preview.y += pos.y - canvas.move.y;
            canvas.move = null;
        }
        var moving = function(e){
            if(!canvas.move) return;
    
            var pos = getPosition(e.originalEvent);
            var mx = this.style.left.replace('px', '');
            var my = this.style.top.replace('px', '');
            var rx = rotateCanvas[0].style.left.replace('px', '');
            var ry = rotateCanvas[0].style.top.replace('px', '');
            var ox = canvas.move.x;
            var oy = canvas.move.y;
            var odx = (pos.x - ox)*scale;
            var ody = (pos.y - oy)*scale;
            this.style.left =  ox + odx - canvas.move.dx;
            this.style.top = oy + ody - canvas.move.dy;
    
            var dx = mx - rx;
            var dy = my - ry;
            rotateCanvas[0].style.left = ox + odx - canvas.move.dx - dx;
            rotateCanvas[0].style.top = oy + ody - canvas.move.dy - dy;
        }
    
        moveCanvas.bind('mousedown touchstart', startMove);
        moveCanvas.bind('mouseup mouseout mouseleave touchend touchcancel', endMove);
        moveCanvas.bind('mousemove', moving);
    
        var startRotate = function(e){
            pos = getPosition(e.originalEvent);
            canvas.rotate = {
                x: parseFloat(moveCanvas[0].style.left.replace('px', '')) + moveCanvas[0].width/2,
                y: parseFloat(moveCanvas[0].style.top.replace('px', '')) + moveCanvas[0].height/2,
             }; 
        }
        var endRotate = function(e){
            if(!canvas.rotate) return;
    
            var pos = getPosition(e.originalEvent);
            canvas.rotate = null;
        }
        var rotating = function(e){
            if(!canvas.rotate) return;
    
            var pos = getPosition(e.originalEvent);
            this.style.left = pos.x * scale - this.width/2;
            this.style.top = pos.y *scale - this.height/2;
    
            var dx = pos.x * scale - canvas.rotate.x;
            var dy = pos.y * scale - canvas.rotate.y;
            var deg = Math.atan2(dy, dx) * 180/Math.PI + 90;
            moveCanvas[0].style.MozTransform = 'rotateZ(' + deg + 'deg)';
            moveCanvas[0].style.webkitTransform = 'rotateZ(' + deg + 'deg)';
            moveCanvas[0].style.oTransform = 'rotateZ(' + deg + 'deg)';
            moveCanvas[0].style.msTransform = 'rotateZ(' + deg + 'deg)';
            preview.deg = deg;
        }
    
        rotateCanvas.bind('mousedown touchstart', startRotate);
        rotateCanvas.bind('mouseup mouseout mouseleave touchend touchcancel', endRotate);
        rotateCanvas.bind('mousemove', rotating);
    
        return tmpImg;
    }
    
    function fixPreview(){
        if(!$('#moveCanvas')[0]) return;
    
        if(canvas.preview){
            canvas.actions.push(canvas.preview);
            canvas.preview = null;
        }
        if(canvas.selection){
            canvas.actions.push(canvas.selection);
            canvas.selection = null;
        }
        $('#moveCanvas').remove();
        $('#rotateCanvas').remove();
        canvas.redraw();
        if(settings.layerOn) updatePreview();
    }
    
    
    $.sketch.tools.figure = {
        onEvent: function(e) {
            switch (e.type) {
                case 'mousedown':
                case 'touchstart':
                    startPreviewing(e, canvas.color, canvas.size, $('#figureType').val());
                    break;
                case 'mouseup':
                case 'mouseout':
                case 'mouseleave':
                case 'touchend':
                case 'touchcancel':
                    stopPreviewing(e);
            }
            if(canvas.preview){
                previewing(e);
            }
        },
        draw: function(action){
            drawFigure(canvas.context, action);
        }
    }
    
    function startPreviewing(e, color, size, figureType){
        var pos = getPosition(e);
    
        canvas.preview = {
            x: pos.x,
            y: pos.y,
            tool: canvas.tool,
            color: color,
            size: size,
            figureType: figureType
        };
    }
    
    function stopPreviewing(e){
        if(canvas.preview){
            var tmpCanvas = $('#tmpCanvas')[0];
            var tmpCtx = tmpCanvas.getContext('2d');
    
            if(canvas.preview.tool == 'figure'){
                canvas.actions.push(canvas.preview);
            }else if(canvas.preview.tool == 'selection'){
                orgCanvas = canvas.el;
                orgCtx = canvas.context;
                canvas.el = tmpCanvas;
                canvas.context = tmpCtx;
                canvas.redraw();
    
                if(canvas.preview.w < 0){
                    canvas.preview.x += canvas.preview.w;
                    canvas.preview.w = - canvas.preview.w;
                }
                if(canvas.preview.h < 0){
                    canvas.preview.y += canvas.preview.h;
                    canvas.preview.h = - canvas.preview.h;
                }
    
                canvas.selection = { 
                    x: canvas.preview.x,
                    y: canvas.preview.y,
                    w: canvas.preview.w,
                    h: canvas.preview.h,
                    sx: canvas.preview.x,
                    sy: canvas.preview.y,
    //                sw: canvas.preview.w,
    //                sh: canvas.preview.h,
                    tool: canvas.preview.tool,
                    type: canvas.preview.type,
                    deg: canvas.preview.deg
                };
                var size = {
                    w: canvas.selection.w,
                    h: canvas.selection.h
                };
                canvas.selection.img = movePreview(tmpCtx, canvas.selection, size);
    
                if(canvas.selection.type == '0'){
                    canvas.actions.push({
                        x: canvas.selection.x,
                        y: canvas.selection.y,
                        w: canvas.selection.w,
                        h: canvas.selection.h,
                        tool: 'figure',
                        figureType: '10'                    
                    });
                }
    
                canvas.el = orgCanvas;
                canvas.context = orgCtx;
            }
    
            canvas.preview = null;
            tmpCtx.clearRect(0, 0, canvas.el.width, canvas.el.height);
            canvas.redraw();
            if(settings.layerOn) updatePreview();
        }
    }
    
    function previewing(e){
        var pos = getPosition(e);
    
        canvas.preview.w = pos.x - canvas.preview.x;
        canvas.preview.h = pos.y - canvas.preview.y;
    
        var tmpCtx = $('#tmpCanvas')[0].getContext('2d');
        tmpCtx.clearRect(0, 0, canvas.el.width, canvas.el.height);
        drawFigure(tmpCtx, canvas.preview);
    }
    
    function drawFigure(context, action){
        switch(action.figureType){
            case '0': //-
                context.beginPath();
                context.lineWidth = action.size;
                context.lineCap = 'butt';
                context.strokeStyle = action.color;
                context.moveTo(action.x, action.y);
                context.lineTo(action.x + action.w, action.y + action.h);
                context.stroke();
                break;
            case '1': //□
                context.beginPath();
                context.lineWidth = action.size;
                context.lineCap = 'butt';
                context.strokeStyle = action.color;
                context.strokeRect(action.x, action.y, action.w, action.h);
                break;
            case '2': //■
                context.beginPath();
                context.lineCap = 'butt';
                context.fillStyle = action.color;
                context.fillRect(action.x, action.y, action.w, action.h);
                break;
            case '3': //○
                context.beginPath();
                context.lineWidth = action.size;
                context.lineCap = 'butt';
                context.strokeStyle = action.color;
                context.beginPath();
                context.arc(action.x + action.w/2, action.y + action.h/2, (Math.abs(action.w) > Math.abs(action.h)) ? Math.abs(action.w/2) : Math.abs(action.h/2), 0, Math.PI*2, false);
                context.stroke();
                break;
            case '4': //●
                context.beginPath();
                context.lineCap = 'butt';
                context.fillStyle = action.color;
                context.beginPath();
                context.arc(action.x + action.w/2, action.y + action.h/2, (Math.abs(action.w) > Math.abs(action.h)) ? Math.abs(action.w/2) : Math.abs(action.h/2), 0, Math.PI*2, false);
                context.fill();
                break
            case '9': //矩形選択
                context.beginPath();
                context.lineWidth = action.size;
                context.lineCap = 'butt';
                context.setLineDash([3, 3]);
                context.strokeStyle = action.color;
                context.strokeRect(action.x, action.y, action.w, action.h);
                break;
            case '10': //クリア
                context.clearRect(action.x, action.y, action.w, action.h);
                break;
        }
    }
    
    
    $.sketch.tools.selection = {
        onEvent: function(e) {
            switch (e.type) {
                case 'mousedown':
                case 'touchstart':
                    if(canvas.selection){
                        fixPreview();
                        return;
                    }else{
                        startPreviewing(e, 'rgba(128, 128, 128, 0.9)', 1, '9');
                        canvas.preview.type = $('#selectionType').val();
                    }
                    break;
                case 'mouseup':
                case 'mouseout':
                case 'mouseleave':
                case 'touchend':
                case 'touchcancel':
                    stopPreviewing(e);
            }
            if(canvas.preview){
                previewing(e);
            }
        },
        draw: function(action){
            drawSelection(canvas.context, action);
        }
    }
    
    function drawSelection(context, action){
        context.translate(action.x + action.img.width/2, action.y + action.img.heihgt/2);
        context.rotate(action.deg * Math.PI/180);
        context.putImageData(action.img, action.x, action.y);
        context.setTransform(1,0,0,1,0,0);
    }
    
    function lpad(string, length, char){
       var padding;
       for(var i = 1; i <= length; i++){
           padding += char;
       }
       return (padding + string).slice(-length);
    }
    
    function getPosition(e){
        var pageX = e.pageX;
        var pageY = e.pageY;
        var offsetX = $('#sketch').offset().left;
        var offsetY = $('#sketch').offset().top;
        var x = parseFloat(pageX - offsetX) / scale;
        var y = parseFloat(pageY - offsetY) / scale;
    
        return {x: x, y: y};
    }
    
    function setCanvasScale(){
        scale = $('#canvasScale').val();
        var size = $('#canvasSize').val().split("x");
        realW = size[0];
        realH = size[1];
        scaleW = realW * scale;
        scaleH = realH * scale;
    }
    
    function changeCanvasScale(){
        setCanvasScale();
    
        $('#oekakiCanvas')[0].style.width = scaleW;
        $('#sketch')[0].style.width = scaleW;
        $('#sketch')[0].style.height = scaleH;
        $('#tmpCanvas')[0].style.width = scaleW;
        $('#tmpCanvas')[0].style.height = scaleH;
    
        $('canvas[id^=layerCanvas]').each(function(i){
            this.width = scaleW;
            this.height = scaleH;
        });
    
        updateAllPreview();
    }
    
    function rotateCanvas(mode, deg){
        newLayers = [];
        for(var i in layers){
            var _layer = layers[i];
            var newActions = [];
            for(var j in _layer.actions){
                var _action = _layer.actions[j];
                switch(_action.tool){
                    case 'marker':
                    case 'curve':
                        var newEvents = [];
                        for(var k in _action.events){
                            var _event = _action.events[k];
                            var pos;
                            if(mode == 'rotate'){
                                pos = rotatePosition(_event.x, _event.y, deg);
                            }else{
                                pos = reversePosition(_event.x, _event.y, mode);
                            }
                            _event.x = pos.x;
                            _event.y = pos.y;
                            newEvents.push(_event);
                        }
                        _action.events = newEvents;
                        break;
                    default:
                        var pos;
                        if(mode == 'rotate'){
                            pos = rotatePosition(_action.x, _action.y, deg);
                            _action.deg += deg;
                        }else{
                            pos = reversePosition(_action.x, _action.y, mode);
                            if(mode == 'reverse') _action.reverse = _action.reverse? 0 : 1;
                            if(mode == 'inverse') _action.inverse = _action.inverse? 0 : 1;                    }
                        _action.x = pos.x;
                        _action.y = pos.y;
                }
                newActions.push(_action);
            }
            _layer.actions = newActions;
            newLayers.push(_layer);
        }
        layers = newLayers;
        updateAllPreview();
    }
    
    function rotatePosition(x, y, deg){
        var cX = realW / 2;
        var cY = realH / 2;
        var dX = x - cX;
        var dY = y - cY;
        var rad = Math.atan2(dY, dX) + (deg * Math.PI / 180);
        var r = Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2));
        x = r * Math.cos(rad) + cX;
        y = r * Math.sin(rad) + cY;
        return {x: x, y: y};
    };
    
    function reversePosition(x, y, mode){
        if(mode == 'reverse'){
            var cX = realW / 2;
            x = 2 * cX - x;
        }else{
            var cY = realH / 2;
            y = 2 * cY - y;        
        }
        return {x: x, y: y}
    }
    
    $.sketch.tools.save = {
        onEvent: function(){},
        draw: function(){}
    }
    
    $.sketch.tools.settings = {
        onEvent: function(){},
        draw: function(){}
    }
    
    function loadIcon(icons){
        var baseUrl = 'https://googledrive.com/host/0B1BW1N6rqpWFa0lTUW1aZThuT28/';
    
        for(var key in icons){
            var img = new Image();
            img.id = key;
            img.src = baseUrl + icons[key];
            img.style.display = 'none';
            $('#oekakiCanvas').append(img);
        }
    }
    
    $(document).keydown(function(e){
        keydownEvent(e, 37, canvas.actions, drawRedo);
        keydownEvent(e, 39, drawRedo, canvas.actions);
    });
    
    $("#backButton").unbind();
    $("#backButton").click(function() {
        changeAction(canvas.actions, drawRedo);
    });
    
    function keydownEvent(e, keyNum, popList, pushList){
        if(e.which === keyNum && e.ctrlKey && popList.length > 0){
            changeAction(popList, pushList);
    
            return false;
        }
    }
    
    function changeAction(popList, pushList){
        pushList.push(popList.pop());
        canvas.redraw();
        if(settings.layerOn) updatePreview();
    }
    
    canvas.redraw = function() {
        var sketch;
        this.el.width = realW;
        this.el.height = realH;
        this.el.style.width = scaleW;
        this.el.style.height = scaleH;
        this.context = this.el.getContext('2d');
        this.context.fillStyle = this.bgcolor;
        this.context.fillRect(0, 0, this.canvas.width(), this.canvas.height());
        if (canvas.baseImageURL) {
            if (this.baseImageCache) {
                this.context.drawImage(this.baseImageCache, 0, 0);
            } else {
                var img = new Image();
                var _this = this;
                img.src = this.baseImageURL;
                img.onload = (function() {
                    _this.baseImageCache = img;
                    _this.context.drawImage(img, 0, 0);
                });
            }
        }
        sketch = this;
        $.each(this.actions, function() {
            if (this.tool) {
                return $.sketch.tools[this.tool].draw.call(sketch, this);
            }
        });
        if (this.painting && this.action) {
            return $.sketch.tools[this.action.tool].draw.call(sketch, this.action);
        }
    };
    
    
    canvas.stopPainting = function(){
        if (this.action) {
           this.actions.push(this.action);
        }
        this.painting = false;
        this.action = null;
        if(settings.layerOn) updatePreview();
    };
    
    $.sketch.tools.marker = {
        onEvent: function(e) {
            switch (e.type) {
                case 'mousedown':
                case 'touchstart':
                    this.startPainting();
                    break;
                case 'mouseup':
                case 'mouseout':
                case 'mouseleave':
                case 'touchend':
                case 'touchcancel':
                    this.stopPainting();
            }
            if (this.painting) {
                var pos = getPosition(e);
                this.action.events.push({x: pos.x,y: pos.y,event: e.type});
                return this.redraw();
            }
        },draw: function(action) {
            var event, previous, _i, _len, _ref;
            this.context.lineJoin = "round";
            this.context.lineCap = "round";
            this.context.beginPath();
            this.context.moveTo(action.events[0].x, action.events[0].y);
            _ref = action.events;
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                event = _ref[_i];
                this.context.lineTo(event.x, event.y);
                previous = event;
            }
            this.context.strokeStyle = action.color;
            this.context.lineWidth = action.size;
            return this.context.stroke();
        }
    };
    
    $.sketch.tools.eraser = {
        onEvent: function(e) {
            $.sketch.tools.marker.onEvent.call(this, e);
        },draw: function(action) {
            var oldcomposite;
            oldcomposite = this.context.globalCompositeOperation;
            /*if(browser == "chrome"){
                this.context.globalCompositeOperation = "copy";
                action.color = this.bgcolor;
            }else*/{
                this.context.globalCompositeOperation = "destination-out";
                action.color = 'rgb(0, 0, 0)';
            }
    
            $.sketch.tools.marker.draw.call(this, action);
            this.context.globalCompositeOperation = oldcomposite;
        }
    };
    
    $.sketch.tools.spoit = {onEvent: function(e) {
            switch (e.type) {
                case 'mousedown':
                case 'touchstart':
                    var pos = getPosition(e);
                    var cc = canvas.context;
                    var spuitImage = cc.getImageData(pos .x, pos.y, 1, 1);
                    var r = spuitImage.data[0];
                    var g = spuitImage.data[1];
                    var b = spuitImage.data[2];
                    var spuit_color = 'rgb(' + r + ',' + g + ',' + b + ')';
                    canvas.color = spuit_color;
                    setPaletColor(canvas.color);
                    break;
            }
        }};
    
    
    $("#canvasSize").unbind();
    $("#canvasSize").change(function() {
        setCanvasScale();
        
        $('canvas[id^=layerCanvas]').each(function(i){
            this.width = realW;
            this.height = realH;
        });
    
        $('canvas[id^=preview]').each(function(i){
            this.width = realW;
            this.height = realH;
    
            this.style.width = realW * PREVIEW_SIZE;
            this.style.height = realH * PREVIEW_SIZE;
        });
    
        var tmpCanvas = $('#tmpCanvas')[0];
        tmpCanvas.width = realW;
        tmpCanvas.height = realH;
    
        changeCanvasScale();
    });
    
    setFile = function(file) {
        var img = new Image();
        var fileReader = new FileReader();
        fileReader.onload = function(event) {
            $(img).attr('src', event.target.result);
        }
        fileReader.readAsDataURL(file);
        img.onload = function() {
            fitImage(canvas.context, img);
            canvas.setBaseImageURL(canvas.el.toDataURL());
            isOekakiDone = 1;
        };
    }
    
    $('#submit_button').click(function(){
        if(!isOekakiDone || !$("#oekakiMode").is(':checked')){
            //
        }else if(($('#sketch').sketch().actions.length || $('#sketch').sketch().baseImageURL)){
            saveImage('commit');
            addLayer();
            fixPreview();
            mergeLayer(canvas.el);
    
            var imgData = canvas.context.getImageData(0, 0, canvas.el.width, canvas.el.height);
    
            var imgCanvas = $('<canvas>').attr({
                id: 'imgCanvas',
                width: canvas.el.width,
                height: canvas.el.height,
                style: 'border: 10pt ridge #D00; background: #EEE;'
            });
    
            imgCanvas[0].getContext('2d').putImageData(imgData, 0, 0);
            $('#oekakiMode').before(imgCanvas);
    
            var result = false;
            if(window.confirm('この内容で投稿しますか?')){
                result = true;
            }
    
    //        deleteLayer(layers.length-2);
            imgCanvas.remove();
            canvas.context.putImageData(imgData, 0, 0);
            canvas.baseImageURL = canvas.el.toDataURL();
            return result;
        }else{
            alert('選択したレイヤに何も描かれていません。');
            return false;
        }
    });
    
    $(window).bind('beforeunload', function(e) {
        if(isOekakiDone){
            return 'お絵かきの途中のようです。';
        }
    });
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2014/08/17 06:19:12 - 2014-08-17
  2. 2014/07/25 09:17:25 - 2014-07-25
  3. 2014/06/15 13:58:18 - 2014-06-15
  4. 2014/06/12 13:55:45 - 2014-06-12
  5. 2014/06/08 13:13:05 - 2014-06-08
  6. 2014/06/08 10:01:10 - 2014-06-08
  7. 2014/06/07 14:59:27 - 2014-06-07
  8. 2014/06/04 14:43:06 - 2014-06-04
  9. 2014/06/02 06:20:24 - 2014-06-02
  10. 2014/06/01 08:49:08 - 2014-06-01
  11. 2014/05/28 14:01:10 - 2014-05-28
  12. 2014/05/28 12:17:42 - 2014-05-28
  13. 2014/05/27 15:38:24 - 2014-05-27
  14. 2014/05/27 15:37:53 - 2014-05-27
  15. 2014/05/27 15:35:44 - 2014-05-27
  16. 2014/05/27 15:30:52 - 2014-05-27
  17. 2014/05/26 15:16:58 - 2014-05-26
  18. 2014/05/25 11:20:52 - 2014-05-25
  19. 2014/05/17 08:09:01 - 2014-05-17
  20. 2014/05/10 16:15:56 - 2014-05-10
  21. 2014/05/07 13:45:33 - 2014-05-07
  22. 2014/05/07 13:18:28 - 2014-05-07
  23. 2014/05/06 11:25:53 - 2014-05-06
  24. 2014/05/06 11:17:36 - 2014-05-06
  25. 2014/05/05 04:10:28 - 2014-05-05
  26. 2014/05/03 12:57:01 - 2014-05-03
  27. 2014/05/03 12:40:44 - 2014-05-03
  28. 2014/05/03 12:19:54 - 2014-05-03
  29. 2014/05/01 14:11:00 - 2014-05-01
  30. 2014/05/01 13:29:09 - 2014-05-01
  31. 2014/05/01 13:27:31 - 2014-05-01
  32. 2014/04/29 10:12:48 - 2014-04-29
  33. 2014/04/29 08:28:57 - 2014-04-29
  34. 2014/04/29 08:27:44 - 2014-04-29
  35. 2014/04/29 08:02:37 - 2014-04-29
  36. 2014/04/27 15:51:26 - 2014-04-27
  37. 2014/04/23 16:18:19 - 2014-04-23
  38. 2014/04/20 09:09:29 - 2014-04-20
  39. 2014/04/19 17:23:05 - 2014-04-19
  40. 2014/04/19 17:21:40 - 2014-04-19
  41. 2014/04/19 16:39:54 - 2014-04-19
  42. 2014/04/19 16:38:41 - 2014-04-19
  43. 2014/04/19 16:37:58 - 2014-04-19
  44. 2014/04/19 15:17:06 - 2014-04-19
  45. 2014/04/10 13:03:04 - 2014-04-10
  46. 2014/04/10 12:38:09 - 2014-04-10
  47. 2014/04/10 12:36:19 - 2014-04-10
  48. 2014/04/08 13:09:27 - 2014-04-08
  49. 2014/04/08 13:00:21 - 2014-04-08