Question

下面的代码允许单击带有背景图像的画布并绘制一个点。我想更改用户更改默认图像，所以我添加了一个输入文件元素。所以转到代码段并按照以下步骤操作：

第1步：点击第一个默认图片“Ziiweb”。坐标是显示在textarea。
步骤2：使用“浏览”按钮加载/预览新图像，然后单击它。如您所见，保留了第一张图像的坐标，为什么？

提示：预览新图片并点击它后，mousedown（）函数被称为两次。

$.fn.canvasAreaDraw = function (options) {

    this.each(function (index, element) {
        init.apply(element, [index, element, options]);
    });
}

var init = function (index, input, options) {

    var points, activePoint, settings;
    var $reset, $canvas, ctx, image;
    var draw, mousedown, stopdrag, move, resize, reset, resot, rightclick, record, previewImage;

    mousedown = function (e) {

        console.log('mousedown');  
        console.log(points);
        console.log(points.length);

        var x, y, dis, lineDis, insertAt = points.length;


        e.preventDefault();
        if (!e.offsetX) {
            e.offsetX = (e.pageX - $(e.target).offset().left);
            e.offsetY = (e.pageY - $(e.target).offset().top);
        }
        x = e.offsetX;
        y = e.offsetY;

        points.splice(insertAt, 0, Math.round(x), Math.round(y));
        activePoint = insertAt;
        $(this).on('mousemove', move);

        record();

        return false;
    };

    record = function () {
        $(input).val(points.join(','));
    };

    settings = $.extend({
        imageUrl: $(this).attr('data-image-url')
    }, options);

    points = [];  //I expected this to reset the points list!!!, but no.... 

    if (!$(this).is('canvas')) {
        $canvas = $('<canvas>');
    } else {
        $canvas = $(this);
    }

    ctx = $canvas[0].getContext('2d');

    image = new Image();

    $(this).prev().prev().val('');

    resize = function () {

        $canvas.attr('height', image.height).attr('width', image.width);
        draw();
    };

    if (settings.imageUrl) {
        image.src = settings.imageUrl;
    } else {
        image.src = options;
    }

    $canvas.css({
        background: 'url(' + image.src + ')'
    });

    $(input).after('<br>', $canvas);

    $(document).ready(function () {
        $canvas.on('mousedown', mousedown);

    });
};

//LOAD IMAGE
previewImage = function () {

    var aux = $(this).prev();

    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            aux.canvasAreaDraw(e.target.result);
        }

        reader.readAsDataURL(this.files[0]);
    }
}

$(document).ready(function () {
    $('.canvas-area').canvasAreaDraw();
    $('.imgInp').on('change', previewImage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="canvas-area" data-image-url="http://www.ziiweb.com/images/logo.png"></textarea>
    <input type='file' class="imgInp" id="jander" />

Answer 1

因为每次附加新图像时，document.ready事件都会触发并将新的mousedown处理程序附加到画布上。

＆＃13;

$.fn.canvasAreaDraw = function (options) {

    this.each(function (index, element) {
        init.apply(element, [index, element, options]);
    });
}

var init = function (index, input, options) {

    var points, activePoint, settings;
    var $reset, $canvas, ctx, image;
    var draw, mousedown, stopdrag, move, resize, reset, resot, rightclick, record, previewImage;

    mousedown = function (e) {

        console.log('mousedown');  
        console.log(points);
        console.log(points.length);

        var x, y, dis, lineDis, insertAt = points.length;


        e.preventDefault();
        if (!e.offsetX) {
            e.offsetX = (e.pageX - $(e.target).offset().left);
            e.offsetY = (e.pageY - $(e.target).offset().top);
        }
        x = e.offsetX;
        y = e.offsetY;

        points.splice(insertAt, 0, Math.round(x), Math.round(y));
        activePoint = insertAt;
        $(this).on('mousemove', move);

        record();

        return false;
    };

    record = function () {
        $(input).val(points.join(','));
    };

    settings = $.extend({
        imageUrl: $(this).attr('data-image-url')
    }, options);

    points = [];  //I expected this to reset the points list!!!, but no.... 

    if (!$(this).is('canvas')) {
        $canvas = $('<canvas>');
    } else {
        $canvas = $(this);
    }

    ctx = $canvas[0].getContext('2d');

    image = new Image();

    $(this).prev().prev().val('');

    resize = function () {

        $canvas.attr('height', image.height).attr('width', image.width);
        draw();
    };

    if (settings.imageUrl) {
        image.src = settings.imageUrl;
    } else {
        image.src = options;
    }

    $canvas.css({
        background: 'url(' + image.src + ')'
    });

    $(input).after('<br>', $canvas);

    $(document).ready(function () {
        alert('attaching a new mousedown event!');
        $canvas.on('mousedown', mousedown);

    });
};

//LOAD IMAGE
previewImage = function () {

    var aux = $(this).prev();

    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            aux.canvasAreaDraw(e.target.result);
        }

        reader.readAsDataURL(this.files[0]);
    }
}

$(document).ready(function () {
    $('.canvas-area').canvasAreaDraw();
    $('.imgInp').on('change', previewImage);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="canvas-area" data-image-url="http://www.ziiweb.com/images/logo.png"></textarea>
    <input type='file' class="imgInp" id="jander" />

＆＃13;

解决方案是将事件附加到其他地方，或使用标记。

＆＃13;

$.fn.canvasAreaDraw = function (options) {

    this.each(function (index, element) {
        init.apply(element, [index, element, options]);
    });
}

var init = function (index, input, options) {

    var points, activePoint, settings;
    var $reset, $canvas, ctx, image;
    var draw, mousedown, stopdrag, move, resize, reset, resot, rightclick, record, previewImage;

    mousedown = function (e) {

        console.log('mousedown');  
        console.log(points);
        console.log(points.length);

        var x, y, dis, lineDis, insertAt = points.length;


        e.preventDefault();
        if (!e.offsetX) {
            e.offsetX = (e.pageX - $(e.target).offset().left);
            e.offsetY = (e.pageY - $(e.target).offset().top);
        }
        x = e.offsetX;
        y = e.offsetY;

        points.splice(insertAt, 0, Math.round(x), Math.round(y));
        activePoint = insertAt;
        $(this).on('mousemove', move);

        record();

        return false;
    };

    record = function () {
        $(input).val(points.join(','));
    };

    settings = $.extend({
        imageUrl: $(this).attr('data-image-url')
    }, options);

    points = [];  //I expected this to reset the points list!!!, but no.... 

    if (!$(this).is('canvas')) {
        $canvas = $('<canvas>');
    } else {
        $canvas = $(this);
    }

    ctx = $canvas[0].getContext('2d');

    image = new Image();

    $(this).prev().prev().val('');

    resize = function () {

        $canvas.attr('height', image.height).attr('width', image.width);
        draw();
    };

    if (settings.imageUrl) {
        image.src = settings.imageUrl;
    } else {
        image.src = options;
    }

    $canvas.css({
        background: 'url(' + image.src + ')'
    });

    $(input).after('<br>', $canvas);

    $(document).ready(function () {
      if(first){
        alert('attaching a new mousedown event!');
     first= false;
        
        $canvas.on('mousedown', mousedown);
}
    });
};
var first = true;

//LOAD IMAGE
previewImage = function () {

    var aux = $(this).prev();

    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            aux.canvasAreaDraw(e.target.result);
        }

        reader.readAsDataURL(this.files[0]);
    }
}

$(document).ready(function () {
    $('.canvas-area').canvasAreaDraw();
    $('.imgInp').on('change', previewImage);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="canvas-area" data-image-url="http://www.ziiweb.com/images/logo.png"></textarea>
    <input type='file' class="imgInp" id="jander" />

＆＃13;

预览图像和画布

1 个答案: