画布驱动的页面翻转演示中的“可点击”链接和文本输入答案

【问题标题】："Clickable" Links and Text Inputs in canvas-powered Page Flip demo画布驱动的页面翻转演示中的“可点击”链接和文本输入
【发布时间】：2013-07-06 12:33:42
【问题描述】：

我正在使用 Google 基于 HTML5 的网络应用程序中的 Page Flip 演示（教程 here 和演示 here），20 Things I Learned about Browsers and the Web 作为我正在创建的网站的基础。

简而言之，这本书的工作原理是将内容直接放入 DOM（搜索引擎友好）并使用 javascript 进行操作。翻页动画被绘制到一个覆盖的画布元素上。

当我开始在我的书中添加链接和联系表时遇到了问题。由于某种原因，链接和输入元素不是“可点击的”。

我创建了一个 jsFiddle here 来演示。

我认为这可能是 z-index 问题： 覆盖的画布 z-index 设置为 100。页面 z-index 从 0 开始，一直到书的前面.如果我将链接/输入以更高的 z-index 放在前面怎么办？

但是更改违规元素的 z-index 并没有解决问题。无论如何，页面本身是使用 z 索引分层的，因此即使将链接/输入带到顶层确实有效，它也不是一个可行的解决方案，因为这样链接就不会与它们各自的页面正确分层。

我该如何解决这个问题： 使链接和输入元素在画布下/通过画布“可点击”？

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();
}

})();

【问题讨论】：

标签： jquery css input hyperlink html5-canvas

【解决方案1】：

我最终发现了一个需要更改 CSS 和 jQuery 的 2 折解决方案（以及“修复”一些由此产生的更改的第三个要求）。

第 1 步：使链接可点击

为了使链接可点击，CSS 属性 pointer-events（值为 none）必须应用于画布元素。

CSS：

    canvas {
        pointer-events: none;
    }

演示 here 显示链接现在可以点击了。

请注意，与 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

演示 here 显示文本输入元素现在可以点击了。

第 3 步：使用 CSS 禁用文本选择

所以现在两个问题 - 不可点击的链接和不可点击的输入元素 - 已得到解决，但其后果是现在重新启用了默认文本选择，从而减少了翻页动画很有吸引力。

解决方案：通过对内容应用 -webkit-touch-callout 和 user-select（均具有值 none）来禁用文本选择每个“页面”的 div。

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;
    }

演示here展示了完整的书，带有可点击的链接和文本输入，并且在翻页时没有文本选择。

【讨论】：