اموزشjCanvas-جلسه دوم

در اموزش قبلی با این فریم ورک اشنا شدیم و اینکه برای اجرای این فریم ورک نیاز به جی کوئری داریم
تمام متد های این فریک ورک به طور منظم از جی کوئری هستند و به همان شیوه استفاده میشوند

 


$('canvas').drawArc({
  fillStyle: 'black',
  x: 100, y: 100,
  radius: 50
});

این کد یک دایره با مختصات 100,100 میسازد

این یک نمونه کد jcanvas است و درواقع کار ما به این شکل خواهد بود

متد ها:

متدaddLayer


$('canvas').addLayer({
  type: 'rectangle',
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
})
.drawLayers();

برای ساخت یک لایر و شکل

نمونه

 

متدAddLayerToGroup

برای اضافه کردن یک لایر به یک گروه یا دسته

addLayerToGroup( layerId, groupName )

متدanimateLayerGroup

انیمیشنی کردن گروه لایرها

  • animateLayerGroup( groupId, properties [, duration ] [, easing ] [, callback ] )
  • animateLayerGroup( groupId, properties, options )

متدdrawrect

برای ساخت مستطیل

drawRect( properties )

متدdrawText

برای رسم نوشته

drawText( properties )

متدcreateGradient

ساخت گرادینت

createGradient( properties )

متدdrawLine

رسم خطوط

drawLine( properties )

متدrotateCanvas

برای چرخاندن و دوران(rotate)شی کانواس

rotateCanvas( properties )

برای مشاهده لیست تمامی متد ها روی این متن کلیک کنید

این ها فقط تعدادی از متد ها بودند و با رفتن به ادرس بالا میتواند تمامی متد هارا ببینید و بشناسید

متد Extendو ساخت یک متد


$.jCanvas.extend({
  name: 'pluginName',
  props: {
    prop: true
  },
  fn: function(ctx, params) {
    // Your code here
  }
});

با فراگیری این متد میتوانید مانند متد های Drawline یا Drawrect یک متد بسازید و از ان استفاده کنید

نمونه استفاده


name برای گذاشتن یک اسم برای پلاگین شماست

props برای اپشنال کردن که دارای مقدار پیشفرض است

fn برای نوشتن فانکشن و کد که دو مقدار ورودی میگیره

ctx که همان context کانواس ما است

و params که موقع فراخوانی متد دریافت میشود

نمونه کد ساخت یک متد برای ساخت یک قلب

$.jCanvas.extend({
  name: 'drawHeart',
  type: 'heart',
  props: {},
  fn: function(ctx, params) {
    // Just to keep our lines short
    var p = params;
    // Enable layer transformations like scale and rotate
    $.jCanvas.transformShape(this, ctx, p);
    // Draw heart
    ctx.beginPath();
    ctx.moveTo(p.x, p.y + p.radius);
    // Left side of heart
    ctx.quadraticCurveTo(
      p.x - (p.radius * 2),
      p.y - (p.radius * 2),
      p.x,
      p.y - (p.radius / 1.5)
    );
    // Right side of heart
    ctx.quadraticCurveTo(
      p.x + (p.radius * 2),
      p.y - (p.radius * 2),
      p.x,
      p.y + p.radius
    );
    // Call the detectEvents() function to enable jCanvas events
    // Be sure to pass it these arguments, too!
    $.jCanvas.detectEvents(this, ctx, p);
    // Call the closePath() functions to fill, stroke, and close the path
    // This function also enables masking support and events
    // It accepts the same arguments as detectEvents()
    $.jCanvas.closePath(this, ctx, p);
  }
});

// Use the drawHeart() method
$('canvas').drawHeart({
  layer: true,
  draggable: true,
  fillStyle: '#c33',
  radius: 50,
  x: 150, y: 130,
  rotate: 30
});

نتیجه:

در اموزش بعدی استفاده از متد هارو اموزش میدم

 

 

 

 

Leave a Reply

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *