jquery resizable कैनवास <div> - जावास्क्रिप्ट, jquery, एचटीएमएल, कैनवास में

मैं jquery के resizable समारोह का उपयोग करें (http://jqueryui.com/resizable/) एक div का आकार बदलने के लिए। इस div में मेरे पास एक इनपुट और कैनवास है, मैं चाहता हूं कि जब मैं अपने div का आकार बदलूं, तो कैनवास का पालन करें, मैं यह कैसे कर सकता हूं?

इस तरह के एक उदाहरण कोड के साथ:

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
<div id="resizable">
<input type="text" id=field />
<canvas id="mycanvas" height="400px"></canvas>
</div>

आपके सहयोग के लिए धन्यवाद।

उत्तर:

यदि आप सीएसएस (जैसे jQuery) का उपयोग करते हैं तो आपको होना चाहिएआनुपातिक रूप से आकार बदलने के लिए सुनिश्चित करें या कैनवास चित्र खींचकर विकृत दिखाई देंगे। आवेदन करते समय aspectRatio प्रॉपर्टी को सेट करके ऐसा करें .resizable ()।

इसके अलावा, आप #myCanvas का आकार बदलने के लिए भी चाहते हैं, तो आपको .resizable () लागू करते समय भी रीसाइज प्रॉपर्टी सेट करनी होगी।

  // make #resizable resizable
// let #resizable know to also resize #myCanvas when it resizes
// require that the resizing be proportional so the canvas drawing is not distorted

$("#resizable").resizable({
alsoResize: "#myCanvas",
aspectRation:true
});

$("#myCanvas").resizable();

अपन सेट करें canvas तत्व "रों height तथा width 100% तक:

div#resizable {
height: 200px; /* Initial height. */
width: 200px; /* Initial width. */
}

div#resizable canvas {
height: 100%;
width: 100%;
}

इसे इस्तेमाल करे।

 $("#resizable").resizable({ stop: function(event, ui) {

$("#mycanvas").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);

} });