Question

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

我正在开发类似的东西：

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

ilustration由两个不同的图像组成。用户将能够调整大小并移动背景图像。当用户点击其他标签时，叠加图片会发生变化。

这是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

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

请帮助。

Answer 1

如果使用0或null的参数调用cache方法，则会引发此错误。

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

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

（EaselJS，HTML Canvas，Stage）Uncaught InvalidStateError：尝试使用不可用或不再可用的对象

1 个答案: