PDA

View Full Version : ایجاد اشیا


armindelavari
دوشنبه 22 آبان 1391, 19:06 عصر
سلام دوستان من تازه شروع کردم جی کوئری رو من می خوام با کمک جی کوئری اشیایی مثل مربع و مستطیل رو بسازم که بعد هم بتونم resize و حرکتشون بدم کسی هست که کمکم کنه ؟
mrgraphy
دوشنبه 22 آبان 1391, 19:48 عصر
سلام دوست عزیز.
این کاری که شما میخوایید بکنید یه مقدار پیچیده هستش و با خود کتابخانه جی کوئری نمیتونید و براتون خیلی خیلی سخت میشه. پیشنهاد من اینه که از jqueru UI استفاده کنید.
armindelavari
دوشنبه 22 آبان 1391, 20:23 عصر
بعد به کمک چه فرمانی می تونم resize کنم یا حرکت داشته باشم رو شی ام ؟؟
mrgraphy
دوشنبه 22 آبان 1391, 22:21 عصر
نه دیگه شما صبور نیستید.
اول jquery UI رو یاد بگیرید و با syntax اون آشنا بشید بعد میتونید با dragable library و resizeable library اون این کارهایی رو که میخوایید انجام بدید.
masudafsar
سه شنبه 23 آبان 1391, 00:16 صبح
اگر از Html5 استفاده کنی میتونی از تگ canvas استفاده کنی که برای اجرای طرح های گرافیکی (یه چیزی شبیه OpenGL) در صفحه وب شماست.

نمونه کد زیر یه نمونه از استفاده Canvas هست که خیلی راحت بدون استفاده از کتابخونه های دیگه ( مثل jQuery ) یه مستطیل رسم میکنه.


<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

</body>
</html>
mrgraphy
چهارشنبه 24 آبان 1391, 12:48 عصر
البته کد بالا فقط تو مرورگر های جدید کار میکنه.
طبق آما هنوز خیلی از ایرانیها دارن از firefox نسخه 3 یا 4 استفاده میکنند.
Variable
چهارشنبه 24 آبان 1391, 23:23 عصر
شما میتونی با سی اس اس و تگ div اشکال هندسی ساده بسازی . بعد با استفاده از توابعی که مربوط به درگ و دراپ کردن (از طریق موس) هستند . اونهارو جابجا کنید.
masudafsar
شنبه 27 آبان 1391, 22:23 عصر
البته کد بالا فقط تو مرورگر های جدید کار میکنه.
طبق آما هنوز خیلی از ایرانیها دارن از firefox نسخه 3 یا 4 استفاده میکنند.

بله من هم اولش گفتم که اگه می خوای با Html 5 کار کنی ،اینکار رو انجام بده.

دوست عزیزمون Variable ایده خوبی داشتن که با CSS میشه یه مستطیل رسم کرد. من هم این ایده رو با jQuery تلفیق کردم و شاید جواب خوبی نباشه ولی بالاخره یه راه حله دیگه D:



<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../jquery.js"></script>
<script>
$("document").ready(function(){
$("#shape").css("top", 20);
$("#shape").css("left", 20);
$("#shape").css("width", 80);
$("#shape").css("height", 120);
$("#shape").show();
});
</script>
<style>
#canvas{
width: 200px;
height: 200px;
background-color: yellow;
}

#shape{
background-color: red;
border: 1px black solid;
display: none;
position: relative;
}
</style>
</head>
<body>
<div id="canvas">
<div id="shape"></div>
</div>
</body>
</html>
masudafsar
شنبه 27 آبان 1391, 22:30 عصر
البته کد بالا فقط تو مرورگر های جدید کار میکنه.
طبق آما هنوز خیلی از ایرانیها دارن از firefox نسخه 3 یا 4 استفاده میکنند.

درضمن شما می تونی تو ویکی پدیا ببینی که مرورگر های زیادی از این تگ(canvas) پشتیبانی میکنند.

Canvas Tag Wikipedia (http://en.wikipedia.org/wiki/Canvas_element#Support)