Canvas framework

Posted on 2016-11-24 by hoyo

—

應用

—

hoyo 自己的應用

需求為從主機載入一張圖之後，可以增加箭頭、文字、方框等基本的繪圖需求，編輯完成按儲存後要直接回存。

技術：HTML5 Canvas

使用工具：Fabric.js

參考

Add Delete button on element in Canvas Fabric JS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-2.2.4.min.js"></script>
    <script src="../js/fabric.min.js"></script>
</head>
<body>

<canvas id="c" style="border: 1px solid #999;"></canvas>

<button onclick="addText()">增加文字</button>
<button onclick="addBlock()">增加方框</button>
<button onclick="addLine2()">增加箭頭</button>
<button onclick="saveImage()">儲存</button>

<script>
    var canvas = new fabric.Canvas('c');

    var HideControls = {
        'tl':true,
        'tr':false,
        'bl':true,
        'br':true,
        'ml':true,
        'mt':true,
        'mr':true,
        'mb':true,
        'mtr':true
    };

    var image = new Image();
    image.src = 'normal_3206.png';
    image.onload = function() {

        // create a wrapper around native canvas element (with id="c")
        canvas.setHeight(image.width).setWidth(image.height);

        canvas.setBackgroundImage('normal_3206.png', canvas.renderAll.bind(canvas), {
            width: canvas.width,
            height: canvas.height,
            // Needed to position backgroundImage at 0/0
            originX: 'left',
            originY: 'top'
        });
    };

    canvas.renderAll();

    function addDeleteBtn(x, y){
        $(".deleteBtn").remove();
        var btnLeft = x-10;
        var btnTop = y-10;
        var deleteBtn = '<img src="../images/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';
        $(".canvas-container").append(deleteBtn);
    }

    canvas.on('object:selected',function(e){
        addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
    });

    canvas.on('mouse:down',function(e){
        if(!canvas.getActiveObject())
        {
            $(".deleteBtn").remove();
        }
    });

    canvas.on('object:modified',function(e){
        addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
    });

    canvas.on('object:scaling',function(e){
        $(".deleteBtn").remove();
    });
    canvas.on('object:moving',function(e){
        $(".deleteBtn").remove();
    });
    canvas.on('object:rotating',function(e){
        $(".deleteBtn").remove();
    });
    $(document).on('click',".deleteBtn",function(){
        if(canvas.getActiveObject())
        {
            canvas.remove(canvas.getActiveObject());
            $(".deleteBtn").remove();
        }
    });

    // ----------------------------------------

    function addBlock(){
        var rect = new fabric.Rect({
            stroke: 'rgb(255,0,0)',
            strokeWidth: 3,
            width: 100, height: 40,
            fill: false, left: 50, top: 50
        }).setControlsVisibility(HideControls);

        canvas.add(rect);
    }

    function addText() {
        var t = new fabric.IText('Tap and Type', {
            fontFamily: 'arial black',
            left: 100,
            top: 100
        });

        var textWithBackground = new fabric.IText('輸入文字', {
            left: 50,
            top: 50,
            textBackgroundColor: 'rgb(255,255,255)'
        }).setControlsVisibility(HideControls);
        canvas.add(textWithBackground);
    }

    function addLine2(){
        var path = new fabric.Path('M512 246.16H36.504l86.98-87.43v-27.895L0 254.943v2.115l123.474 124.107h.01V353.26l-86.98-87.42H512z', {
                    stroke: 'rgb(255,255,255)',
                    strokeWidth: 8,
                    fill: 'rgb(255,0,0)'
                }
        ).scaleToWidth(100).setControlsVisibility(HideControls);

        canvas.add(path);
    }

    // 送出處理後圖像給 PHP
    function saveImage() {
        request = new XMLHttpRequest();
        request.open('POST', 'c1.php', true);

        var $Json = {};
        $Json['image'] = canvas.toDataURL();
        $Json['id'] = 'aa111';
        request.send( JSON.stringify($Json) );
    }

</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var canvas = new fabric.Canvas('c');

var HideControls = {

'tl':true,

'tr':false,

'bl':true,

'br':true,

'ml':true,

'mt':true,

'mr':true,

'mb':true,

'mtr':true

};

var image = new Image();

image.src = 'normal_3206.png';

image.onload = function() {

// create a wrapper around native canvas element (with id="c")

canvas.setHeight(image.width).setWidth(image.height);

canvas.setBackgroundImage('normal_3206.png', canvas.renderAll.bind(canvas), {

width: canvas.width,

height: canvas.height,

// Needed to position backgroundImage at 0/0

originX: 'left',

originY: 'top'

});

};

canvas.renderAll();

function addDeleteBtn(x, y){

$(".deleteBtn").remove();

var btnLeft = x-10;

var btnTop = y-10;

var deleteBtn = '<img src="../images/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';

$(".canvas-container").append(deleteBtn);

}

canvas.on('object:selected',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('mouse:down',function(e){

if(!canvas.getActiveObject())

{

$(".deleteBtn").remove();

}

});

canvas.on('object:modified',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('object:scaling',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:moving',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:rotating',function(e){

$(".deleteBtn").remove();

});

$(document).on('click',".deleteBtn",function(){

if(canvas.getActiveObject())

{

canvas.remove(canvas.getActiveObject());

$(".deleteBtn").remove();

}

});

// ----------------------------------------

function addBlock(){

var rect = new fabric.Rect({

stroke: 'rgb(255,0,0)',

strokeWidth: 3,

width: 100, height: 40,

fill: false, left: 50, top: 50

}).setControlsVisibility(HideControls);

canvas.add(rect);

}

function addText() {

var t = new fabric.IText('Tap and Type', {

fontFamily: 'arial black',

left: 100,

top: 100

});

var textWithBackground = new fabric.IText('輸入文字', {

left: 50,

top: 50,

textBackgroundColor: 'rgb(255,255,255)'

}).setControlsVisibility(HideControls);

canvas.add(textWithBackground);

}

function addLine2(){

var path = new fabric.Path('M512 246.16H36.504l86.98-87.43v-27.895L0 254.943v2.115l123.474 124.107h.01V353.26l-86.98-87.42H512z', {

stroke: 'rgb(255,255,255)',

strokeWidth: 8,

fill: 'rgb(255,0,0)'

}

).scaleToWidth(100).setControlsVisibility(HideControls);

canvas.add(path);

}

// 送出處理後圖像給 PHP

function saveImage() {

request = new XMLHttpRequest();

request.open('POST', 'c1.php', true);

var $Json = {};

$Json['image'] = canvas.toDataURL();

$Json['id'] = 'aa111';

request.send( JSON.stringify($Json) );

}

</script>

</body>

</html>

—

Web Audio API – 使用

Posted on 2016-10-28 by hoyo

參考

—

實作

使用 Canvas 繪圖

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div id="example">
    <audio id="player" class="hideIfNoApi" controls="controls" src="http://ianreah.apphb.com/sounds/movement%20proposition.mp3" crossorigin="anonymous"> </audio>

    <div id="visualisation" class="hideIfNoApi"> </div>
</div>

<div id="visualizer_wrapper">
    <canvas id='canvas' width="702" height="350" style="border: 1px #eee solid;"></canvas>
</div>

<script>
    $(function () {
        context = new (window.AudioContext || window.webkitAudioContext)();
        
        // Create the analyser
        var analyser = context.createAnalyser();
        
        // https://developer.mozilla.org/zh-TW/docs/Web/API/AnalyserNode/fftSize
        analyser.fftSize = 64;
        
        // Get the frequency data and update the visualisation
        function update() {
            var canvas = document.getElementById('canvas'),
                    cwidth = canvas.width,
                    cheight = canvas.height - 2,
                    meterWidth = 20, //width of the meters in the spectrum
                    gap = 2, //gap between meters
                    capHeight = 2,
                    capStyle = '#fff',
                    meterNum = 702 / (10 + 2), //count of the meters
                    capYPositionArray = []; //store the vertical position of hte caps for the preivous frame
            ctx = canvas.getContext('2d');
            gradient = ctx.createLinearGradient(0, 0, 0, 300);
            gradient.addColorStop(1, '#0f0');
            gradient.addColorStop(0.5, '#ff0');
            gradient.addColorStop(0, '#f00');

            var drawMeter = function() {
                var array = new Uint8Array(analyser.frequencyBinCount);
                
                analyser.getByteFrequencyData(array);
                ctx.clearRect(0, 0, cwidth, cheight);
                
                for (var i = 0; i < array.length; i++) {
                    var value = array[i];
                    if (capYPositionArray.length < Math.round(meterNum)) {
                        capYPositionArray.push(value);
                    }
                    ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
                    ctx.fillRect(i * 22 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);
                }
                requestAnimationFrame(drawMeter);
            };
            
            requestAnimationFrame(drawMeter);
        }

        // Hook up the audio routing...
        // player -> analyser -> speakers
        // (Do this after the player is ready to play - https://code.google.com/p/chromium/issues/detail?id=112368#c4)
        $("#player").bind('canplay', function() {
            var source = context.createMediaElementSource(this);
            source.connect(analyser);
            analyser.connect(context.destination);

            update();
        });
    });
</script>

</body>
</html>

<!DOCTYPE html>

<html>

</head>

<body>

</div>

</div>

$(function () {

context = new (window.AudioContext || window.webkitAudioContext)();

// Create the analyser

var analyser = context.createAnalyser();

// https://developer.mozilla.org/zh-TW/docs/Web/API/AnalyserNode/fftSize

analyser.fftSize = 64;

// Get the frequency data and update the visualisation

function update() {

var canvas = document.getElementById('canvas'),

cwidth = canvas.width,

cheight = canvas.height - 2,

meterWidth = 20, //width of the meters in the spectrum

gap = 2, //gap between meters

capHeight = 2,

capStyle = '#fff',

meterNum = 702 / (10 + 2), //count of the meters

capYPositionArray = []; //store the vertical position of hte caps for the preivous frame

ctx = canvas.getContext('2d');

gradient = ctx.createLinearGradient(0, 0, 0, 300);

gradient.addColorStop(1, '#0f0');

gradient.addColorStop(0.5, '#ff0');

gradient.addColorStop(0, '#f00');

var drawMeter = function() {

var array = new Uint8Array(analyser.frequencyBinCount);

analyser.getByteFrequencyData(array);

ctx.clearRect(0, 0, cwidth, cheight);

for (var i = 0; i < array.length; i++) {

var value = array[i];

if (capYPositionArray.length < Math.round(meterNum)) {

capYPositionArray.push(value);

}

ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look

ctx.fillRect(i * 22 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);

}

requestAnimationFrame(drawMeter);

};

requestAnimationFrame(drawMeter);

}

// Hook up the audio routing...

// player -> analyser -> speakers

// (Do this after the player is ready to play - https://code.google.com/p/chromium/issues/detail?id=112368#c4)

$("#player").bind('canplay', function() {

var source = context.createMediaElementSource(this);

source.connect(analyser);

analyser.connect(context.destination);

update();

});

</script>

</body>

</html>

analyser.fftSize
設定值除以 2 就是陣列取樣數，預設 2048
analyser.getByteFrequencyData(Uint8Array(analyser.frequencyBinCount));
數值在 0 – 255 ，沒聲音為 0
analyser.getByteTimeDomainData(Uint8Array(analyser.frequencyBinCount));
數值在 0 – 255 ，沒聲音為 128
requestAnimationFrame 根據瀏覽器設定(一般來說是 60fps) 更新
能量條的高度是根據 0-255 所繪製，所以如果要增減就必須調整 analyser.getByteFrequencyData(array) 的 array 值

—

RICOH THETA 網頁全景處理

Posted on 2016-05-13 by hoyo

參考

—

360 Degree Interactive Panoramas And Virtual Tours In Html 5 – Multiple Browsers / 360 Easy – Complete Tutorial On 360 Degree Photography

<head>
    <script type="text/javascript" src="utilities.js"></script>

    <style type="text/css" media="screen">
        * { outline : none; -moz-outline : none -moz-mac-focusring; }
        #source-img	  { position: absolute; left: -999em; }
        canvas        	{ position: absolute; float:center; top: -90px; }
        #screen	        	{ position: absolute; float:center; top: 0px; }
        #screen div     { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;
            background: #fffff; }
        div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;
            width: 630px; }
    </style>

    <script type="text/javascript">
        var YD = YAHOO.util.Dom,
                YE = YAHOO.util.Event;
        var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,
                stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {
            canvas = YD.get('cv');
            ctx = canvas.getContext('2d');
            canvas.width = 630;
            canvas.height = 815;
            canvas.style.width = '630px';
            canvas.style.height = '815px';
            stage = YD.get('screen-overlay');
            YE.on(stage, 'mousedown', startMoveBackground);
            YE.on(stage, 'mousemove', moveBackground);
            YE.on(stage, 'mouseout', stopMove);
            YE.on(stage, 'mouseup', stopMoveBackground);
            stagePos = YD.getXY(stage);
            stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];
            img = YD.get('source-img');
            redraw(); }
        function startMoveBackground(e) {}
        function moveBackground(e) {
            dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;
            if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {
                if(moveDirection === 'left' || !moveDirection) {
                    clearInterval(moveInterval);
                    moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}
            else
            { if(moveDirection === 'right' || !moveDirection) {
                clearInterval(moveInterval);
                moveInterval = setInterval(function() { moveLeft(); }, timeInt);
                moveDirection = 'left'; }}}
        function stopMove() {
            clearInterval(moveInterval);
            moveDirection = null; }
        function moveRight() {
            imgOffset += dist;
            redraw(); }
        function moveLeft() {
            imgOffset -= dist;
            redraw(); }
        function stopMoveBackground(e) {}
        function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {
            if(typeof offset === 'undefined') offset = 0;
            var h = img.height,
                    w = (img.width - 2) / 2.5;
            var polarity = (pixelWidth > 0) ? 1 : -1;
            var widthFactor = Math.abs(pixelWidth) / w;
            var delta = Math.abs(pixelWidth);
            var dHeight, dWidth, dy, dx;
            var constant = Math.pow(100000, scalingFactor); //380;
            var firstInc = ((delta / 2) * (delta / 2)) / constant;
            for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {
                (function(m) {
                    sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +
                    ((inc * m + offset) % img.width) };})(n);
                sy = 0;
                sWidth = inc;
                sHeight = h;
                firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;
                secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;
                dHeight = (n < len / 2) ? firstHalf : secondHalf;
                dWidth = inc * widthFactor;
                dy = y + (h - dHeight) / 2;
                dx = x + (inc * n * widthFactor * polarity);
                data.push({
                    sx: sx,
                    sy: sy,
                    sWidth: sWidth,
                    sHeight: sHeight,
                    dx: dx,
                    dy: dy,
                    dWidth: dWidth,
                    dHeight: dHeight }); } }
        function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }
        function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {
            if(data.length === 0) {
                precalculate(img, x, y, pixelWidth, scalingFactor, offset); }
            var slice, sx;
            for(var n = 0, len = data.length; n < len; n++) {
                slice = data[n];
                ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,
                        slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}
        YAHOO.util.Event.on(window, 'load', init);
    </script>
</head>

<body>
<canvas id="cv"></canvas>
<img src="panorama.jpg" id="source-img" />
<div id="screen-overlay"></div>
</body>

100

101

102

103

104

105

106

107

108

<head>

* { outline : none; -moz-outline : none -moz-mac-focusring; }

#source-img { position: absolute; left: -999em; }

canvas { position: absolute; float:center; top: -90px; }

#screen { position: absolute; float:center; top: 0px; }

#screen div { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;

background: #fffff; }

div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;

width: 630px; }

</style>

var YD = YAHOO.util.Dom,

YE = YAHOO.util.Event;

var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,

stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {

canvas = YD.get('cv');

ctx = canvas.getContext('2d');

canvas.width = 630;

canvas.height = 815;

canvas.style.width = '630px';

canvas.style.height = '815px';

stage = YD.get('screen-overlay');

YE.on(stage, 'mousedown', startMoveBackground);

YE.on(stage, 'mousemove', moveBackground);

YE.on(stage, 'mouseout', stopMove);

YE.on(stage, 'mouseup', stopMoveBackground);

stagePos = YD.getXY(stage);

stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];

img = YD.get('source-img');

redraw(); }

function startMoveBackground(e) {}

function moveBackground(e) {

dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;

if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {

if(moveDirection === 'left' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}

else

{ if(moveDirection === 'right' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveLeft(); }, timeInt);

moveDirection = 'left'; }}}

function stopMove() {

clearInterval(moveInterval);

moveDirection = null; }

function moveRight() {

imgOffset += dist;

redraw(); }

function moveLeft() {

imgOffset -= dist;

redraw(); }

function stopMoveBackground(e) {}

function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {

if(typeof offset === 'undefined') offset = 0;

var h = img.height,

w = (img.width - 2) / 2.5;

var polarity = (pixelWidth > 0) ? 1 : -1;

var widthFactor = Math.abs(pixelWidth) / w;

var delta = Math.abs(pixelWidth);

var dHeight, dWidth, dy, dx;

var constant = Math.pow(100000, scalingFactor); //380;

var firstInc = ((delta / 2) * (delta / 2)) / constant;

for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {

(function(m) {

sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +

((inc * m + offset) % img.width) };})(n);

sy = 0;

sWidth = inc;

sHeight = h;

firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;

secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;

dHeight = (n < len / 2) ? firstHalf : secondHalf;

dWidth = inc * widthFactor;

dy = y + (h - dHeight) / 2;

dx = x + (inc * n * widthFactor * polarity);

data.push({

sx: sx,

sy: sy,

sWidth: sWidth,

sHeight: sHeight,

dx: dx,

dy: dy,

dWidth: dWidth,

dHeight: dHeight }); } }

function redraw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }

function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {

if(data.length === 0) {

precalculate(img, x, y, pixelWidth, scalingFactor, offset); }

var slice, sx;

for(var n = 0, len = data.length; n < len; n++) {

slice = data[n];

ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,

slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}

YAHOO.util.Event.on(window, 'load', init);

</script>

</head>

<body>

</body>

—

720全景图

<!DOCTYPE html>
<html lang="en">
<head>
    <title>全景演示</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            position: absolute;
            top: 0px; width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family:Monospace;
            font-size:13px;
            font-weight: bold;
            text-align:center;
        }

        a {
            color: #ffffff;
        }
    </style>

</head>
<body>

<div id="container"></div>
<div id="info">单张图片全景.</div>

<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/340/p1qwizuy/three.min.js"></script>

<script>
    var camera, scene, renderer;
    var fov = 70,
            texture_placeholder,
            isUserInteracting = false,
            onMouseDownMouseX = 0, onMouseDownMouseY = 0,
            lon = 0, onMouseDownLon = 0,
            lat = 0, onMouseDownLat = 0,
            phi = 0, theta = 0;

    init();
    animate();

    function init() {
        var container, mesh;
        container = document.getElementById( 'container' );
        camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
        camera.target = new THREE.Vector3( 0, 0, 0 );
        scene = new THREE.Scene();

        mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'http://sandbox.runjs.cn/uploads/rs/232/bpgpj5uv/123.jpg' ) } ) );
        mesh.scale.x = -1;
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        container.appendChild( renderer.domElement );

        document.addEventListener( 'mousedown', onDocumentMouseDown, false );
        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
        document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
        document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
        //
        window.addEventListener( 'resize', onWindowResize, false );
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function onDocumentMouseDown( event ) {
        event.preventDefault();
        isUserInteracting = true;
        onPointerDownPointerX = event.clientX;
        onPointerDownPointerY = event.clientY;
        onPointerDownLon = lon;
        onPointerDownLat = lat;
    }

    function onDocumentMouseMove( event ) {
        if ( isUserInteracting ) {
            lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
            lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
        }
    }

    function onDocumentMouseUp( event ) {
        isUserInteracting = false;
    }

    function onDocumentMouseWheel( event ) {
        // WebKit
        if ( event.wheelDeltaY ) {
            fov -= event.wheelDeltaY * 0.05;
            // Opera / Explorer 9

        } else if ( event.wheelDelta ) {
            fov -= event.wheelDelta * 0.05;
            // Firefox

        } else if ( event.detail ) {
            fov += event.detail * 1.0;
        }

        camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
        render();
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        lat = Math.max( - 85, Math.min( 85, lat ) );
        phi = THREE.Math.degToRad( 90 - lat );
        theta = THREE.Math.degToRad( lon );

        camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
        camera.target.y = 500 * Math.cos( phi );
        camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

        camera.lookAt( camera.target );

        /*
         // distortion
         camera.position.x = - camera.target.x;
         camera.position.y = - camera.target.y;
         camera.position.z = - camera.target.z;
         */

        renderer.render( scene, camera );
    }
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<!DOCTYPE html>

<head>

<style>

body {

background-color: #000000;

margin: 0px;

overflow: hidden;

}

#info {

position: absolute;

top: 0px; width: 100%;

color: #ffffff;

padding: 5px;

font-family:Monospace;

font-size:13px;

font-weight: bold;

text-align:center;

}

a {

color: #ffffff;

}

</style>

</head>

<body>

<div id="info">单张图片全景.</div>

var camera, scene, renderer;

var fov = 70,

texture_placeholder,

isUserInteracting = false,

onMouseDownMouseX = 0, onMouseDownMouseY = 0,

lon = 0, onMouseDownLon = 0,

lat = 0, onMouseDownLat = 0,

phi = 0, theta = 0;

init();

animate();

function init() {

var container, mesh;

container = document.getElementById( 'container' );

camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );

camera.target = new THREE.Vector3( 0, 0, 0 );

scene = new THREE.Scene();

mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'http://sandbox.runjs.cn/uploads/rs/232/bpgpj5uv/123.jpg' ) } ) );

mesh.scale.x = -1;

scene.add( mesh );

renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

document.addEventListener( 'mouseup', onDocumentMouseUp, false );

document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseDown( event ) {

event.preventDefault();

isUserInteracting = true;

onPointerDownPointerX = event.clientX;

onPointerDownPointerY = event.clientY;

onPointerDownLon = lon;

onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

if ( isUserInteracting ) {

lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;

lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

}

function onDocumentMouseUp( event ) {

isUserInteracting = false;

}

function onDocumentMouseWheel( event ) {

// WebKit

if ( event.wheelDeltaY ) {

fov -= event.wheelDeltaY * 0.05;

// Opera / Explorer 9

} else if ( event.wheelDelta ) {

fov -= event.wheelDelta * 0.05;

// Firefox

} else if ( event.detail ) {

fov += event.detail * 1.0;

}

camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );

render();

}

function animate() {

requestAnimationFrame( animate );

render();

}

function render() {

lat = Math.max( - 85, Math.min( 85, lat ) );

phi = THREE.Math.degToRad( 90 - lat );

theta = THREE.Math.degToRad( lon );

camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );

camera.target.y = 500 * Math.cos( phi );

camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

camera.lookAt( camera.target );

// distortion

camera.position.x = - camera.target.x;

camera.position.y = - camera.target.y;

camera.position.z = - camera.target.z;

renderer.render( scene, camera );

}

</script>

</body>

</html>

—

jQuery Templates – jQuery Templates plugin

Posted on 2016-04-13 by hoyo

jQuery 的模板

jquery-tmpl
jQuery .tmpl(), .template()学习资料小结(http://coolong124220.nidbox.com/diary/read/8045452)
10 JavaScript and jQuery Templates Engines
An Introduction to jQuery Templates
自幹

<!-- jQuery template -->
<script src="/Component_Front/jquery-tmpl-master/jquery.tmpl.min.js"></script>
    
<!-- 資料顯示的地方 -->
<table cellspacing="0" cellpadding="3" border="1">
    <tbody id="rows"></tbody>
</table>

<!-- 模板 -->
<table style="display: none;">
    <tbody id="myTemplate">
    <tr>
        <td>${ID}</td>
        <td>${Name}</td>
    </tr>
    </tbody>
</table>

<script>
    var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}];
    $('#myTemplate').tmpl(users).appendTo('#rows');
</script>

</table>

<tr>

</tr>

</tbody>

</table>

var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}];

$('#myTemplate').tmpl(users).appendTo('#rows');

</script>

為什麼這麼改？

使用官方預設的 <script id=”” type=”text/x-jquery-tmpl”></script> 寫法，PhpStorm 無法解析語法，無法解析語法就代表程式有可能會犯錯

非用 script 不可

<script id="myTemplate" type="text/template">
    {{if ID=='aCloud'}}
    <tr>
        <td>${ID}</td>
        <td>${Name}</td>
    </tr>
    {{/if}}
</script>

<tr>

</tr>

</script>

如果模板內必須使用到其他功能，那還是必須使用 script tag 才行，調整一下就可以正常執行 jQuery Templates 以及相容 PhpStorm

—

加上 index

http://jsfiddle.net/XCThu/26/

<script id="myTemplate" type="text/template">
    {{each Content}}
    <tr>
        <td>${index} ${id}</td>
        <td>${Create_Time}</td>
    </tr>
    {{/each}}
</script>

<script>
    $.post("./?a=<{$smarty.get.a}>&b=Search", {P:P, Pn:$Pn, Search:Search, SearchTrash:SearchTrash}, function(Json) {
        if (R.Result==true) {
            $('#myTemplate').tmpl(Json).appendTo('#Main').find('tbody');
        }
    }, 'json');
</script>

<tr>

<td>${index} ${id}</td>

<td>${Create_Time}</td>

</tr>

</script>

$.post("./?a=<{$smarty.get.a}>&b=Search", {P:P, Pn:$Pn, Search:Search, SearchTrash:SearchTrash}, function(Json) {

if (R.Result==true) {

$('#myTemplate').tmpl(Json).appendTo('#Main').find('tbody');

}

}, 'json');

</script>

—

ajax + Json + jQuery Template 應用

<table id="Main" class="table">
    <thead>
    <tr>
        <td>#</td>
        <td>時間</td>
        <td>廠商簡稱</td>
        <td>Email</td>
        <td>聯絡電話</td>
        <td>消費金額</td>
        <td>紅利</td>
        <td><label>審核 <input type="checkbox" id="checkAll" onchange="Select_is_Verify(this)" style="width:16px;height:16px" /></label></td>
        <td>%</td>
    </tr>
    </thead>
    <tbody><!--  --></tbody>
</table>

<!--  -->
<script id="myTemplate" type="text/template">
    {{each Content}}
    {{if $index%2==0}}
    <tr bgcolor="f0f0f0">
        {{else}}
    <tr bgcolor="ffffff">
        {{/if}}
        
        <td>${id}</td>
        <td>${Create_Time}</td>
        <td>${ShortName}</td>
        <td>${Email}</td>
        <td>${Phone}</td>
        <td>${Spend}</td>
        <td>${Points}</td>

        <td align="center">
            {{if is_Verify=='Y'}}
            V
            {{/if}}

            {{if is_Verify=='N' && is_ConfirmEmail=='Y'}}
            <input type="checkbox" name="is_Verify[]" class="is_Verify" value="${id}" style="width:24px; height:24px;"/>
            {{/if}}
        </td>

        <td><i data-id="${id}" class="btn btn-default btn-xs fa fa-edit"></i> <i data-id="${id}" class="btn btn-default btn-xs fa fa-trash"></i></td>
    </tr>
    {{/each}}
</script>

<script>
    $.post("./?a=<{$smarty.get.a}>&b=Search", {P:P, Pn:$Pn, Search:Search, SearchTrash:SearchTrash}, function(Json) {
        if (Json.Result==true) {
            var $TotalCount = Json.TotalCount;

            $("#Main").find("tbody").html('');

            // 顯示 Json 資料
            $('#myTemplate').tmpl(Json).appendTo('#Main').find('tbody');
        }
    }, 'json');
</script>

<thead>

<tr>

<td>Email</td>

</tr>

</thead>

</table>

<td>${Create_Time}</td>

<td>${ShortName}</td>

<td>${Email}</td>

<td>${Phone}</td>

<td>${Spend}</td>

<td>${Points}</td>

</td>

</tr>

</script>

$.post("./?a=<{$smarty.get.a}>&b=Search", {P:P, Pn:$Pn, Search:Search, SearchTrash:SearchTrash}, function(Json) {

if (Json.Result==true) {

var $TotalCount = Json.TotalCount;

$("#Main").find("tbody").html('');

// 顯示 Json 資料

$('#myTemplate').tmpl(Json).appendTo('#Main').find('tbody');

}

}, 'json');

</script>

—

使用 String() 自幹模板

其實模板講白就是一個預先設計好的結構，使用流程大概是這樣

設計模板架構
取用
替換變動資料

設計模板架構

<div id="Template_HTML" style="display: none;">
    <div class="LandCSS">

        <div class="form-group">
            <label class="col-sm-2 control-label">地號</label>
            <div class="col-sm-10">
                <input type="text" id="Update_" name="LandCode[]" value="{LandCode}" class="form-control"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">地理位置</div>
            <div class="col-sm-10">
                <label >距離 <input type="text" name="G_From" class="inLineStyle" style="width: 200px;" /></label> <label>約 <input type="number" name="G_MinuteDrive" class="inLineStyle" style="width: 60px;" /> 分鐘車程</label>
            </div>
        </div>

    </div>
</div>

</div>

</div>

取用

var $Template = $('#Template_HTML').html();

1	var $Template = $('#Template_HTML').html();

替換變動資料

搜尋 {LandCode} 字串，替代成實際從 Json 取得資料

$.each(DataLand, function (LK, LP) {
    var aa = $Template.replace(/\{LandCode\}/i, LP[0]);
    $HTML += aa;
});

$.each(DataLand, function (LK, LP) {

var aa = $Template.replace(/\{LandCode\}/i, LP[0]);

$HTML += aa;

});

—

jBox 第一次載入圖片無法顯示

Posted on 2016-03-04 by hoyo

jBox 使用 background image 來顯示圖片，在第一次點選圖片時都無法顯示

DIV background images not showing on first load. Only happens when first loading app on FB using Chrome

解決的方式是在第一次載入顯示時，加上 setTimeout()

// JBox-image-gallery1-0 
if (next_id == 0 ) {
    var $this = this;
    setTimeout(function(){
        (!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + $this.images[gallery][next_id].src + '">').load(function () {
            appendImage(gallery, next_id, true);
        });
    }, 500);
}

else {
    (!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + this.images[gallery][next_id].src + '">').load(function () {
        appendImage(gallery, next_id, true);
    });
}

// JBox-image-gallery1-0

if (next_id == 0 ) {

var $this = this;

setTimeout(function(){

(!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + $this.images[gallery][next_id].src + '">').load(function () {

appendImage(gallery, next_id, true);

});

}, 500);

}

else {

(!jQuery('#JBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + this.images[gallery][next_id].src + '">').load(function () {

appendImage(gallery, next_id, true);

});

}

—

jQuery 的 Selectors 較佳用法

Posted on 2015-12-18 by hoyo

PhpStorm

原JavaScript 語法

$("#FormAdd input").val();

1	$("#FormAdd input").val();

警告訊息：

Checks that jQuery selectors are used in an efficient way. It suggests to split descendant selectors which are prefaced with ID selector and warns about duplicated selectors which could be cached.

1	Checks that jQuery selectors are used in an efficient way. It suggests to split descendant selectors which are prefaced with ID selector and warns about duplicated selectors which could be cached.

Inefficient jQuery usage warnings in PHPStorm IDE

修正後語法

$("#FormAdd").find("input").val();

1	$("#FormAdd").find("input").val();

—

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

Category Archives: 網頁前端

Canvas framework

hoyo 自己的應用

Web Audio API – 使用

參考

實作

RICOH THETA 網頁全景處理

jQuery Templates – jQuery Templates plugin

jQuery 的模板

ajax + Json + jQuery Template 應用

使用 String() 自幹模板

jBox 第一次載入圖片無法顯示

jQuery 的 Selectors 較佳用法