Resizable Tuval (JQuery UI)

Question

HERHANGİ DOM öğesi bu sayfaya göre boyutlandırılabilir yapılabilir: http://jqueryui.com/demos/resizable/

Ancak, bu CANVAS elemanı için çalışmıyor gibi görünüyor. Mümkün?

Answer 1

Tuval iki boyutlandırma davranış tipleri vardır: içindekiler tuval büyür iken içeriği statik kalması yeniden boyutlandırma tuval yeni boyutlar

sığacak şekilde uzatılır yeniden boyutlandırma

• veya

küçülür

İki tür "yeniden boyutlandırma" özelliğini gösteren bir sayfa: http://xavi.co/static/so-resizable-canvas.html

İlk tür istiyorsanız Yeniden boyutlandırma (içeriği genişlet) ardından tuvali bir kapsayıcıya div yerleştirin ve tuvalin width ve height değerlerini CSS kullanarak% 100'e ayarlayın.

/* The CSS */ 
#stretch { 
    height: 100px; 
    width: 200px; 
} 

#stretch canvas { 
    width: 100%; 
    height: 100%; 
} 

<!-- The markup --> 
<div id="stretch"><canvas></canvas></div> 

// The JavaScript 
$("#stretch").resizable(); 

boyutlandırma (statik içerik) İkinci tür iki aşamalı bir süreçtir: Burada gibi bir kod göründüğü aşağıda. İlk önce, tuval öğesinin width ve height özniteliklerini ayarlamanız gerekir. Ne yazık ki, bunu yapmak tuvali temizler, böylece tüm içeriğini tekrar çizmelisiniz. kullanıcı widget'ı yeniden boyutlandırma durduğunda

/* The CSS */ 
#resize { 
    height: 100px; 
    width: 200px; 
} 

<!-- The markup --> 
<div id="resize"><canvas></canvas></div> 

// The JavaScript 
$("#resize").resizable({ stop: function(event, ui) { 
    $("canvas", this).each(function() { 
     $(this).attr({ width: ui.size.width, height: ui.size.height }); 

     // Adjusting the width or height attribute clears the canvas of 
     // its contents, so you are forced to redraw. 
     reDraw(this); 
    }); 
} }); 

Şu Yukarıdaki kod tuvalin içeriğe tekrar çizer: İşte bunu yapar kod kısmı. Tuvali resize üzerinde yeniden çizmek mümkündür, ancak yeniden boyutlandırma olayları oldukça sık görülür ve yeniden çekimler pahalı işlemlerdir - dikkatle yaklaşın.

Answer 2

Neden tuval öğesinden önce bir div uygulamayın ve bu öğeyi yeniden boyutlandırmayın ve durduğunda, tuvaldeki genişlik ve yüksekliği uygulayın ve ardından tuvali yeniden çizin.

bu kullanarak getirmedi, tuval koordinat sisteminin komik bir cilvesi biraz var

Answer 3

:

#stretch canvas { 
    width: 100%; 
    height: 100%; 
} 

Bu CSS kuralları nedeniyle kullanmak zorunda (yukarıdaki örnekte belirtilen) tuvalin genişlik/yükseklik özelliklerinde% belirtemezsiniz. Ancak, sadece bu kuralları kullanarak çizilen nesnelerin ezilmiş olarak görünmesini sağladığınızda, beklenmedik sonuçlar elde edeceğinizi göreceksiniz. İşte Yukarıdaki CSS

/* The CSS */ 
    #stretch { 
     width: 200px; 
     height: 100px;   
    } 
    #stretch canvas { 
     border:1px solid red; 
     width: 100%; 
     height: 100%; 
    } 

tuval doğru boyuta çekilir ve sınır kural doğru uygulandığını ... bir tuval kenarlıklı, bu.Başka yerde kodunda eklenen mavi dikdörtgen, tüm etrafında bir 20px dolgu ile tuval doldurmak gerekiyordu, ancak bu olmadı:

Bunu düzeltmek için mutlaka da bir genişliğe belirtmek yapmak ve tuval elemanı için yüksekliği (HTML veya setAttribute ile javaScript halinde):

canvas.setAttribute('width', '200'); 
canvas.setAttribute('height', '100'); 

veya

<canvas width=200 height=100></canvas> 

Ben sayfayı yenilediğinizde

Şimdi beklediğim olsun:

Bu 'çift-çek' doğru koordinat sistemini kullanarak emin tuval çizilir yapabilir ve hala yeniden boyutlandırılabilir sağlayacak CSS kuralları ile. Bu bir hata ise, eminim ki bu konuya zaman içinde sabitlenecektir.

Bu sadece bir düzeltme sağlamakla olur, ancak StackOverflow o here