0

私は、Google の HTML5 ベースの Web アプリの Page Flip デモ (チュートリアルはこちら、デモはこちら) を使用しています。私が作成している Web サイトのベースとして、ブラウザーと Web について私が学んだ 20 のこと。

要するに、この本は、コンテンツを DOM (検索エンジンに適したもの) に直接配置し、javascript を使用して操作することによって機能します。ページめくりアニメーションは、オーバーレイされたキャンバス要素に描画されます。

本にリンクと連絡先フォームを追加し始めたときに問題が発生しました。何らかの理由で、リンクと入力要素が「クリック可能」ではありません。

ここでは、デモ用に jsFiddle を作成しました。

z-index の問題かもしれないと思いました:オーバーレイされたキャンバスの z-index は 100 に設定されています。ページの z-index は 0 から始まり、本の先頭に向かって進みます。より高い z-index を使用してリンク/入力を前面に移動するとどうなりますか?

しかし、問題のある要素の z-index を変更しても問題は解決しませんでした。とにかく、ページ自体は z-indices を使用して階層化されているため、リンク/入力を最上位レイヤーに持ってくることができたとしても、リンクがそれぞれのページで正しく階層化されないため、実行可能なソリューションにはなりません。

この問題を解決するにはどうすればよいですか: リンクと入力要素をキャンバスの下/キャンバスを通して「クリック可能」にしますか?

HTML:

    <body>
        <div id="book">

            <canvas id="pageflip-canvas"></canvas>

            <div id="pages">

                <section>
                    <div>
                        <h2>Test Page</h2>
                        <p>This demo is fantastic! ...apart from the fact that link and input elements aren't supported. The canvas element and JS on which the entire magic relies, renders both "unclickable" - a major drawback. See below:</p>
                        <a href="#">Click me!</a>
                        <input type="text"></input>
                    </div>
                </section>

                <section>
                    <div>
                        <h2>History</h2>
                        <p>Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers and Opera and standardized by the WHATWG on new proposed specifications for next generation web technologies.</p>
                    </div>
                </section>

            </div>
        </div>
    </body>

CSS:

    body, h2, p {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #444;
        color: #333;
        font-family: Helvetica, sans-serif;
    }

    #book {
        background: url("https://dl.dropboxusercontent.com/u/3799114/page-flip-demo/book.png") no-repeat;
        position: absolute;
        width: 830px;
        height: 260px;
        left: 50%;
        top: 50%;
        margin-left: -400px;
        margin-top: -125px;
    }

    #pages section {
        background: url("https://dl.dropboxusercontent.com/u/3799114/page-flip-demo/paper.png") no-repeat;
        display: block;
        width: 400px;
        height: 250px;
        position: absolute;
        left: 415px;
        top: 5px;
        overflow: hidden;
    }
        #pages section>div {
            display: block;
            width: 400px;
            height: 250px;
            font-size: 12px;
        }
        #pages section p,
        #pages section h2 {
            padding: 3px 35px;
            line-height: 1.4em;
            text-align: justify;
        }
        #pages section h2{
            margin: 15px 0 10px;
        }

    #pageflip-canvas {
        position: absolute;
        z-index: 100;
    }

jQuery:

(function() {

// Dimensions of the whole book
var BOOK_WIDTH = 830;
var BOOK_HEIGHT = 260;

// Dimensions of one page in the book
var PAGE_WIDTH = 400;
var PAGE_HEIGHT = 250;

// Vertical spacing between the top edge of the book and the papers
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;

// The canvas size equals to the book dimensions + this padding
var CANVAS_PADDING = 60;

var page = 0;

var canvas = document.getElementById( "pageflip-canvas" );
var context = canvas.getContext( "2d" );

var mouse = { x: 0, y: 0 };

var flips = [];

var book = document.getElementById( "book" );

// List of all the page elements in the DOM
var pages = book.getElementsByTagName( "section" );

// Organize the depth of our pages and create the flip definitions
for( var i = 0, len = pages.length; i < len; i++ ) {
    pages[i].style.zIndex = len - i;

    flips.push( {
        // Current progress of the flip (left -1 to right +1)
        progress: 1,
        // The target value towards which progress is always moving
        target: 1,
        // The page DOM element related to this flip
        page: pages[i], 
        // True while the page is being dragged
        dragging: false
    } );
}

// Resize the canvas to match the book size
canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );

// Offset the canvas so that it's padding is evenly spread around the book
canvas.style.top = -CANVAS_PADDING + "px";
canvas.style.left = -CANVAS_PADDING + "px";

// Render the page flip 60 times a second
setInterval( render, 1000 / 60 );

document.addEventListener( "mousemove", mouseMoveHandler, false );
document.addEventListener( "mousedown", mouseDownHandler, false );
document.addEventListener( "mouseup", mouseUpHandler, false );

function mouseMoveHandler( event ) {
    // Offset mouse position so that the top of the book spine is 0,0
    mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
    mouse.y = event.clientY - book.offsetTop;
}

function mouseDownHandler( event ) {
    // Make sure the mouse pointer is inside of the book
    if (Math.abs(mouse.x) < PAGE_WIDTH) {
        if (mouse.x < 0 && page - 1 >= 0) {
            // We are on the left side, drag the previous page
            flips[page - 1].dragging = true;
        }
        else if (mouse.x > 0 && page + 1 < flips.length) {
            // We are on the right side, drag the current page
            flips[page].dragging = true;
        }
    }

    // Prevents the text selection
    event.preventDefault();
}

function mouseUpHandler( event ) {
    for( var i = 0; i < flips.length; i++ ) {
        // If this flip was being dragged, animate to its destination
        if( flips[i].dragging ) {
            // Figure out which page we should navigate to
            if( mouse.x < 0 ) {
                flips[i].target = -1;
                page = Math.min( page + 1, flips.length );
            }
            else {
                flips[i].target = 1;
                page = Math.max( page - 1, 0 );
            }
        }

        flips[i].dragging = false;
    }
}

function render() {

    // Reset all pixels in the canvas
    context.clearRect( 0, 0, canvas.width, canvas.height );

    for( var i = 0, len = flips.length; i < len; i++ ) {
        var flip = flips[i];

        if( flip.dragging ) {
            flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
        }

        // Ease progress towards the target value 
        flip.progress += ( flip.target - flip.progress ) * 0.2;

        // If the flip is being dragged or is somewhere in the middle of the book, render it
        if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
            drawFlip( flip );
        }

    }

}

function drawFlip( flip ) {
    // Strength of the fold is strongest in the middle of the book
    var strength = 1 - Math.abs( flip.progress );

    // Width of the folded paper
    var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );

    // X position of the folded paper
    var foldX = PAGE_WIDTH * flip.progress + foldWidth;

    // How far the page should outdent vertically due to perspective
    var verticalOutdent = 20 * strength;

    // The maximum width of the left and right side shadows
    var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
    var rightShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
    var leftShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );


    // Change page element width to match the x position of the fold
    flip.page.style.width = Math.max(foldX, 0) + "px";

    context.save();
    context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );


    // Draw a sharp shadow on the left side of the page
    context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
    context.lineWidth = 30 * strength;
    context.beginPath();
    context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
    context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
    context.stroke();


    // Right side drop shadow
    var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
    rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
    rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');

    context.fillStyle = rightShadowGradient;
    context.beginPath();
    context.moveTo(foldX, 0);
    context.lineTo(foldX + rightShadowWidth, 0);
    context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
    context.lineTo(foldX, PAGE_HEIGHT);
    context.fill();


    // Left side drop shadow
    var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
    leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
    leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');

    context.fillStyle = leftShadowGradient;
    context.beginPath();
    context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
    context.lineTo(foldX - foldWidth, 0);
    context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
    context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
    context.fill();


    // Gradient applied to the folded paper (highlights & shadows)
    var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
    foldGradient.addColorStop(0.35, '#fafafa');
    foldGradient.addColorStop(0.73, '#eeeeee');
    foldGradient.addColorStop(0.9, '#fafafa');
    foldGradient.addColorStop(1.0, '#e2e2e2');

    context.fillStyle = foldGradient;
    context.strokeStyle = 'rgba(0,0,0,0.06)';
    context.lineWidth = 0.5;

    // Draw the folded piece of paper
    context.beginPath();
    context.moveTo(foldX, 0);
    context.lineTo(foldX, PAGE_HEIGHT);
    context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
    context.lineTo(foldX - foldWidth, -verticalOutdent);
    context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);

    context.fill();
    context.stroke();


    context.restore();
}

})();

4

1 に答える 1

1

私は最終的に、CSS と jQuery の両方に変更を加える必要がある 2 つの解決策を発見しました (結果として生じる変更の一部を「修正」するための 3 つ目の要件も同様です)。

ステップ 1: リンクをクリック可能にする

リンクをクリック可能にするには、CSS 属性pointer-events (値none ) を canvas 要素に適用する必要があります。

CSS:

    canvas {
        pointer-events: none;
    }

クリックできるようになったリンクを示すデモはこちら。

IE との互換性のために、次の条件付き CSS ステートメントが必要であることに注意してください。

<!--[if IE]>
    <style type="text/css">
        canvas {
            background: none !important;
        }
    </style>
<![endif]-->

ステップ 2: テキスト入力をクリック可能にする

しかし、ご覧のとおり、これではテキスト入力要素の問題は解決されず、クリックできないままです。(興味深いことに、ステップ 1 の実装後にラジオ ボタンが機能します - デモには含まれていません)。

これに対する解決策は、jQuery にあります (元のデモ ファイルの 82 行目): メソッドevent.preventDefault();

このメソッドは、マウスがページ上でドラッグされたときにデフォルトのテキストが選択されないようにするために用意されています。マウスのドラッグ アクションはページをめくるために使用され、テキスト選択はアニメーションの魅力を低下させます。

このメソッドを削除またはコメントアウトすると、テキスト入力が再び有効になりました。

jQuery:

    // event.preventDefault(); // comment out this beast

テキスト入力要素がクリック可能になったことを示すデモはこちら。

ステップ 3: CSS を使用してテキスト選択を無効にする

これで、2 つの問題 (クリックできないリンクとクリックできない入力要素) は解決されましたが、デフォルトのテキスト選択が再び有効になり、ページめくりアニメーションが魅力的ではなくなりました。

解決策:各「ページ」のコンテンツ div に-webkit-touch-calloutとuser-select (どちらも値none ) を適用して、テキスト選択を無効にします。

CSS:

    #page-content-div {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: moz-none;
        -ms-user-select: none;
        user-select: none;
    }

こちらのデモでは、クリック可能なリンクとテキスト入力があり、ページめくり時にテキストが選択されていない完成した本を示しています。

于 2013-07-06T03:48:41.437 に答える