0

我在尝试使用 EaselJS 动态生成画布时遇到问题。

我正在开发类似的东西：

[1] http://acuradoria.com/ilustration1.jpg

插图由两个不同的图像组成。用户将能够调整和移动背景图像。当用户单击不同的选项卡时，覆盖图像会发生变化。

这是javascript：

<script type="text/javascript">
    var tamanho;
    var offsetX;
    var offsetY;
    var rotation;
    var slideInterval = -1;

    function init() {                       
        console.log('iniating');

        console.log('Settings sliders');
    $(".tamanhoSlider").slider({
            value: 50,
            min: 1,
            max: 100,
            disabled:false,
            change:handleChange,
            slide: handleSlide
        });

        $(".offsetHorizontalSlider").slider({
            value: 0,
            min: -300,
            max: 300,
            disabled:false,
            change:handleChange,
            slide: handleSlide
        });

        $(".offsetVerticalSlider").slider({
            value: 0,
            min: -300,
            max: 300,
            disabled:false,
            change:handleChange,
            slide: handleSlide
        });

        $(".rotationSlider").slider({
            value: 0,
            min: -180,
            max: 180,
            disabled:false,
            change:handleChange,
            slide: handleSlide
        });

       $("#resetBtn").click(resetButtons);

        canvas = document.getElementById("testCanvas");
        stage = new createjs.Stage(canvas); 
        img = new Image();
        img.onload = displayImage();
        img.src = "<? echo $thumb->path; ?>";

        midiaImage = new Image();               
        midiaImage.src = "<? echo $midiaPath; ?>";  
        midiaImage.onload = displayMidia();



    }                       

    function handleSlide() {
    if (slideInterval == -1) {
            slideInterval = setInterval(applyEffect, 250);
        }
    }

    function handleChange() {
        clearInterval(slideInterval);
        slideInterval = -1;
        updateImage();
    }

    function updateImage(stage) {   

        stage.getChildByName('bmp').x = ($(".offsetHorizontalSlider").slider("option", "value")) + 200;
        stage.getChildByName('bmp').y = ($(".offsetVerticalSlider").slider("option", "value")) + 200;
        stage.getChildByName('bmp').scaleX = $(".tamanhoSlider").slider("option", "value") / 100;
        stage.getChildByName('bmp').scaleY = $(".tamanhoSlider").slider("option", "value")/ 100;
        stage.getChildByName('bmp').rotation = $(".rotationSlider").slider("option", "value");      
        stage.getChildByName('bmp').regX = bmp.image.naturalWidth / 2;
        stage.getChildByName('bmp').regY = bmp.image.naturalHeight /2;      
        stage.update();
        console.log('Image updated', stage);
    }

    function resetButtons(){
        $(".offsetHorizontalSlider").slider("option", "value", 0);
        $(".offsetVerticalSlider").slider("option", "value", 0);
        $(".tamanhoSlider").slider("option", "value", 50);
        $(".rotationSlider").slider("option", "value", 0);              
        updateImage();
    }

    exportAndSaveCanvas = function () {

        // Get the canvas screenshot as PNG
        var screenshot = Canvas2Image.saveAsPNG(canvas, true);

        // This is a little trick to get the SRC attribute from the generated <img> screenshot
        canvas.parentNode.appendChild(screenshot);
        screenshot.id = "canvasimage";      
        data = $('#canvasimage').attr('src');
        canvas.parentNode.removeChild(screenshot);


        // Send the screenshot to PHP to save it on the server
        var url = '/includes/procedural/saveThumb.php';
        $.ajax({ 
            type: "POST", 
            url: url,
            dataType: 'text',
            data: {
            base64data : data
            }
        });
    }

    displayImage = function() {
        console.log('Handling image load');                 

        bmp = new createjs.Bitmap(img);
        bmp.name = 'bmp';
        bmp.scaleX = bmp.scaleY = 0.4;
        bmp.cache(0,0,img.width,img.height);
        stage.addChild(bmp);
        stage.update();
    }

    displayMidia = function(){

        midia = new createjs.Bitmap(midiaImage);            
        var MAX_WIDTH = 400;
        var MAX_HEIGHT = 400;
        var scale = 1;
        var width = $(midiaImage).get(0).width;
        var height = $(midiaImage).get(0).height;
        if (width > height) {
            if (width > MAX_WIDTH)
            {
                scale = MAX_WIDTH / width;
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;

            }
        } 
        else 
        {
            if (height > MAX_HEIGHT)
            {
                scale = MAX_HEIGHT / height;
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;

            }
        }

        midia.scaleX = scale;
        midia.scaleY = scale;   


        stage.addChild(midia);
        stage.update();



    }

</script>

我收到以下错误：[2] http://acuradoria.com/ilustration2.jpg

看起来我正在尝试使用不再存在的东西。尽管如此，我无法确定它是什么。={

请帮忙。

4

1 回答 1

0

如果您使用参数为 0 或 null 调用缓存方法，则会引发此错误。

调用缓存方法使 EaselJS 创建一个临时画布，绘制内容，然后将其作为位图存储在内存中以供以后使用。如果您传递 0 或 null 作为宽度或高度，浏览器将尝试创建 0 大小的屏幕外画布。

Firefox 会将其视为致命错误，而 Chrome 会默默地忽略它。

于 2016-12-18T09:49:15.057 回答