Question

我已经写了这个片段，用于将用户加载的图像分成矩形片段并继续（在用户输入上）显示每个片段与其相邻片段之间的距离。

我怀疑被调用来破坏和显示每个元素的函数是问题的原因，但是无法确定哪个部分。

function breakez()
{
    // More to add, unfinished
    var first = 0;
    var piece_x = (ell.width%mouse_xt);
    var piece_y = (ell.height%mouse_yt);
    var old_values = new Array;
    var counter_i = 0 ;
    var counter_j = 0;
    for(var _x=0;_x<= old_width;_x=_x+mouse_xt)    
    {

        for(var _y=0;_y<= old_height;_y=_y+mouse_yt)   
        {

            old_values[counter_i,counter_j]={x:_x,y:_y};
            counter_j+=1;
        }
        counter_j=0;
        counter_i+=1
    }
    console.log(old_values);
    var start_x=0;
    var start_y=0;
    for(var __x=0;__x<= piece_x;__x=__x+1) 
    {

        for(var __y=0;__y<= piece_y;__y=__y+1)
        {

            elle.drawImage(imageObj,old_values[__x,__y].x,old_values[__x,__y].y,mouse_xt,mouse_yt,start_x,start_y,mouse_xt,mouse_yt);
            start_y=start_y+mouse_yt+thickness;
        };
        start_y=0;
        start_x=start_x+mouse_xt+thickness;
    }
};

其余的是here。

可以对此有所了解吗？

错误

一切正常，直到用户按下休息符，然后图像消失，剩下的就是空白画布。

Answer 1

以下是使用填充对图片进行切片的示例：http://jsfiddle.net/m1erickson/B2ad7/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    $("#test").hide();

    var rows=5;
    var cols=5;
    var padding=10;
    var clipWidth,clipHeight;

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();img.onload=start;img.src="koolaidman.png";
    function start(){

        clipWidth=img.width/cols;
        clipHeight=img.height/rows;

        canvas.width=img.width+cols*padding;
        canvas.height=img.height+rows*padding;

        ctx.drawImage(img,0,0);

        $("#test").show();
    }


    $("#test").click(function(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var y=0;y<5;y++){
        for(var x=0;x<5;x++){
            ctx.drawImage(img,
                x*clipWidth,y*clipHeight,clipWidth,clipHeight,
                (clipWidth+padding)*x,(clipHeight+padding)*y,clipWidth,clipHeight
            );
        }}
    });


}); // end $(function(){});
</script>
</head>
<body>
    <button id="test">Slice the Image</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

javascript代码中的buggy迭代裁剪功能

1 个答案: