0

http://liveweave.com/iAEThw
http://jsbin.com/UXAhuki/1/edit

select 要素の div、text、remove には 3 つのオプションがあります。

ここで、div が選択されると、IntDraw 関数が呼び出されると述べています。

if ($(this).val() === 'div') {
    $('#divoptions').show();
    $('#spanoptions').hide();

    // No Background Option
    $('#nobg').click(function() {
        $('input[name=bgcolor]').val('none');
    });

    IntDraw();
    code.val(preview.html());
}

ただし、他のオプションを選択しても、関数がまだ呼び出されていることを意味する div を描画できます。

考えられることはすべて試しましたが、これを修正できないようです。どんな助けでも大歓迎です。

これが描画機能です...

var enabled = true;

function IntDraw() {
    if(enabled === true) {
        setMousePosition = function(e) {
            var ev = e || window.event; //Moz || IE
            if (ev.pageX) { //Moz
                mouse.y = ev.pageY + window.pageYOffset;
                mouse.x = ev.pageX + window.pageXOffset;
            } else if (ev.clientX) { //IE
                mouse.y = ev.clientY + document.body.scrollTop;
                mouse.x = ev.clientX + document.body.scrollLeft;
            }
        }

        var mouse = {
            x: 0,
            y: 0,
            startX: 0,
            startY: 0
        };
        var element = null;

        canvas.onmousemove = function(e) {
            setMousePosition();
            if (element !== null) {
                var bcolor = $('input[name=bcolor]').val(),
                    bgcolor = $('input[name=bgcolor]').val(),
                    divborderstyle = $('#divborderstyle').val(),
                    divborder = $('#divborder').val();

                element.style.position = 'absolute';
                element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
                element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
                element.style.width = Math.abs(mouse.x - mouse.startX) + '%';
                element.style.height = Math.abs(mouse.y - mouse.startY) + '%';
                element.style.border = divborder + ' ' + divborderstyle + ' ' + bcolor;
                element.style.background = bgcolor;
                element.style.overflow = 'auto';
            }
        };

        canvas.onmousedown = function(e) {
            if (element !== null) {
                element = null;
                canvas.style.cursor = "default";
                console.log("finsihed.");
            } else {
                console.log("begun.");
                mouse.startY = mouse.y;
                mouse.startX = mouse.x;
                element = document.createElement('div');
                element.className = 'rect';
                element.style.top = mouse.y + '%';
                element.style.left = mouse.x + '%';
                canvas.appendChild(element);
                canvas.style.cursor = "crosshair";
            }
        };


        canvas.onmouseup = function(e) {
            element = null;
            canvas.style.cursor = "default";
            console.log("finsihed.");
            code.val(preview.html());
        };
    }
    else {
        enabled = false;
    }
}
4

1 に答える 1

1

「div」オプションが選択されていない場合は、マウス イベントを返す必要があります。また、「div」オプションが選択されていない場合は、キャンバス上で何もしないでください。これを行うには、各マウスイベントで選択したオプションを確認します

if ($('select#tools option:selected').val() !== 'div') return;

http://jsbin.com/UXAhuki/2/edit

于 2013-10-14T18:36:16.350 に答える