只能看到兩個畫布中的第一個（使用離子框架繪制）

Question

我在將兩個畫布彼此重疊顯示時遇到問題。

我正在使用ionic框架和easyljs在一張畫布上繪制。 現在，我還希望在使用鼠標時可以看到大小和顏色不同的光標（當然不是應用程序內），因此盡管我可以在較低層的畫布上繪制並在較高層的畫布上顯示光標，鼠標移動時反復清除它。

我有一個離子性的拖拽事件，一個觸摸事件（均要繪制）和一個angujarjs ng-mousemove（用於光標）。 我必須將所有這些事件放在html文件的第一個畫布中，否則它們將不會注冊。

問題是我只能看到第一層的內容。 盡管畫布是透明的對象，所以我可以使用不同的z索引將它們彼此層疊。

以下是我使用ionic和easyljs的代碼，我嘗試將其盡量縮短。 如果以這種方式運行它，則只能繪制，但看不到光標。 如果您將ID切換為layer0和layer1，則相反。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Doodle</title>

        <script src="ionic.bundle.js"></script>
        <script src="easeljs-0.8.1.combined.js"></script>

        <script type="text/javascript">
            angular.module('starter', ['ionic'])

            .controller('DrawCtrl', function($scope) {

                var canvas, stage;
                var drawingCanvas;
                var oldPt;
                var oldMidPt;   

                canvas = document.getElementById("layer0");     
                //check to see if we are running in a browser with touch support
                stage = new createjs.Stage(canvas);
                stage.autoClear = false;
                stage.enableDOMEvents(true);    
                createjs.Touch.enable(stage);
                createjs.Ticker.setFPS(24);         
                drawingCanvas = new createjs.Shape();
                stage.addChild(drawingCanvas);          

                $scope.downEvent = function() {                 
                    oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
                    oldMidPt = oldPt.clone();
                };

                $scope.dragEvent = function() {
                    //draw on layer0, don't clear
                    oldPt.x = stage.mouseX;
                    oldPt.y = stage.mouseY;
                    var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);           
                    drawingCanvas.graphics.clear().setStrokeStyle(10, 'round', 'round').beginStroke("#000000").moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);                  

                    oldMidPt.x = midPt.x;
                    oldMidPt.y = midPt.y;

                    stage.update();                 
                };

                $scope.mouseMove = function() { 
                    //draw circle on canvas during mouse move, immediately clear layer1 again (like a cursor)
                    var ctx = document.getElementById('layer1').getContext('2d');
                    ctx.globalCompositeOperation = "source-over";
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    var x = stage.mouseX;
                    var y = stage.mouseY;
                    ctx.fillStyle = "#000000";
                    ctx.beginPath();
                    ctx.arc(x, y, 10, 0, Math.PI * 2, true);
                    ctx.closePath();
                    ctx.fill();                 
                };
            })
        </script> 
    </head>
    <body ng-app="starter" ng-controller="DrawCtrl">
        <canvas id="layer0" style="z-index:0; border: 1px solid black; " width="300" height="180" ng-mousemove="mouseMove()" on-touch="downEvent($event)" on-drag="dragEvent()" <="" canvas="">
        <canvas id="layer1" style="z-index:1; border: 1px solid black; " width="300" height="180" <="" canvas="">
    </canvas></canvas></body>
</html>

我剛剛開始學習html / javascript，非常感謝您的投入！

Answer 1

快速猜測，但是您的問題可能出在您的畫布HTML行中：

<canvas id="layer0" style="z-index:0; border: 1px solid black; " width="300" height="180" ng-mousemove="mouseMove()" on-touch="downEvent($event)" on-drag="dragEvent()" <="" canvas="">
<canvas id="layer1" style="z-index:1; border: 1px solid black; " width="300" height="180" <="" canvas="">

最后一點： <="" canvas="">不是很有效。 將這些行替換為：

<canvas id="layer0" style="z-index:0; border: 1px solid black; " width="300" height="180" ng-mousemove="mouseMove()" on-touch="downEvent($event)" on-drag="dragEvent()"></canvas>
<canvas id="layer1" style="z-index:1; border: 1px solid black; " width="300" height="180"></canvas>

並刪除2個尾隨的</canvas></canvas> 。

只能看到兩個畫布中的第一個（使用離子框架繪制）

問題描述

1 個解決方案

解決方案1
2 已采納 2015-10-13 07:26:30

只能看到兩個畫布中的第一個（使用離子框架繪制）

問題描述

1 個解決方案

解決方案1 2 已采納 2015-10-13 07:26:30

解決方案1
2 已采納 2015-10-13 07:26:30