0

canvas に元に戻す/やり直し機能を書き込もうとしています。オブジェクトを描画するために fabric-js を使用しています。元に戻す ? やり直しは正常に機能していますが、問題は、キャンバスをクリックすると元に戻す/やり直し機能を呼び出した後で、要素が非表示になります。canvas.renderAll() を試しましたが、まだ問題が発生しています。

元に戻す手順::

  1. Element Drawnの前canvas.toDataURl()に、変数配列に保存しています。

    2.元に戻すボタンがクリックされたとき、ファブリックの clear メソッドを使用してキャンバスをクリアし、Previous `toDataUrl() を使用してキャンバスに描画する変数配列を取得しています。

コード ::

     function undoDrawOnCanvas() {
        console.log('inside undodrawn');
        // If we have some restore points
        if (restorePoints.length > 0) {
            // Create a new Image object

            var oImg = new Image();
            // When the image object is fully loaded in the memory...
            oImg.onload = function() {

                //Saving point for Redo
                c_redo=document.getElementById("design_text").toDataURL("image/png");

                canvas.clear();

                // Get the canvas context
                var canvasContext = document.getElementById("design_text").getContext("2d");
                // and draw the image (restore point) on the canvas. That would overwrite anything
                // already drawn on the canvas, which will basically restore it to a previous point.
                canvasContext.drawImage(oImg, 0, 0);
            }
            // The source of the image, is the last restoration point
            oImg.src = restorePoints.pop();

        }
    }  
4

0 に答える 0