Kazayla oluşmayı önle/vurgula vurgula

Question

html5 kanvasını kullanarak bir çizim uygulamasına sahibim. Kullanıcı çizim yaparken ve kanvas alanı tuval alanından çıkarsa, sayfadaki açık mavi veya sarı renkteki html öğelerini vurgular.

Bu çizim deneyimi engelleyicidir. Böyle bir vurgunun olmasını önlemek için bir yol var mı?

işleme ve kod çizim olay bu yazının kapalı dayanır: tuval etiketleri sonra sınırlayıcı kutunun dışına sürükleyerek, tuval üzerine çizim üzerinde bazı h1 etiketleri eklerseniz http://jsfiddle.net/rnNFB/1/

var x ; 
var y ; 

var lower = $('#lower').get(0).getContext('2d') ; 
var upper = $('#upper').get(0).getContext('2d') ; 

var dragging = false ; 

function drawStroke(ctx){ 
    var i ; 
    ctx.strokeStyle='rgba(0,0,0,0.5)' ; 
    ctx.lineWidth=10 ; 
    ctx.beginPath() ; 
    ctx.moveTo(x[0],y[0]) ; 
    for (i=1; i < x.length; i++){ 
     ctx.lineTo(x[i],y[i]) ; 
    } 
    ctx.stroke() ; 
} 

$('#upper').mousedown(function(e){ 
    x=[e.layerX]; 
    y=[e.layerY]; 
    dragging=true}) ; 

$('#upper').mousemove(function(e){ 
    if (dragging){ 
     x.push(e.layerX); 
     y.push(e.layerY); 
     upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ; 
     drawStroke(upper) ; 
    }}) ; 

$('#upper').mouseup(function(e){ 
    dragging = false ; 
    upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ; 
    drawStroke(lower) ; 
}) ; 

, göreceksiniz mavi bir vurgu. Bu davranışı engellemenin bir yolu var mı?

Answer 1

Aşağıdaki CSS sınıfını, seçilemez olması gereken öğelere uygulayın. Aynı zamanda sadece vücuda uygulanabilir (yine de en iyi uygulama, gerçekten gerekli olan elemanlarda kullanıcı seçimini devre dışı bırakmak olabilir). (Sadece IE < için 10 gerekli)

.unselectable { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
} 

JS:

// the onselectstart way for navigator.appName === "Microsoft Internet Explorer" 
document.onselectstart = function() { return false; }; 

konu dışı ama aynı zamanda uygulama için interesing olabilir: Eğer jsFiddle ve hareket büyük bir çizgi kalınlığı seçerseniz Fare çok yavaş, skeçlerde bazı çirkin etkiler (bloklar) görebilirsiniz. Her zaman, onüç noktadan (sürüklerken) koordinatın son koordinatla olan mesafesinin çok küçük olmadığını kontrol edin. Örneğin, mesafe, çizginin yaklaşık 1/6'sından fazlaysa, sadece koordinatlara çizim ekleyin.

Answer 2

Bu komut dosyasını deneyin, sürükleme true olarak ayarlanırsa seçimi devre dışı bırakır. Bu şekilde çizim yapmadığınız zaman metni yine de seçebilirsiniz.

document.onselectstart = function(e) { 
    if (dragging) { 
    e.preventDefault(); 
    return false; 
    } 
}; 

Answer 3

belgesini .onselectstart kullanmazdım. Tek yapmanız gereken tek şey yerine söz konusu tuval üzerine bu konur:

canvas.onselectstart = function() { return false; };

Ek olarak/aşağı fareyi yakalamak için addEventListener son argüman ayarlayarak tuval üzerine gerçekleşmekte olan/yukarı olaylarını hareket olabilir true. Bu, fare tuvali terk etse bile çiziminizin mükemmel şekilde devam etmesini sağlar.