My Marlin configs for Fabrikator Mini and CTC i3 Pro B
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

jcanvas.js 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  1. /*!
  2. jCanvas v2.2.1
  3. Caleb Evans
  4. 2.2.1 revisions by Thinkyhead
  5. */
  6. (function($, document, Math, Number, undefined) {
  7. // jC global object
  8. var jC = {};
  9. jC.originals = {
  10. width: 20,
  11. height: 20,
  12. cornerRadius: 0,
  13. fillStyle: 'transparent',
  14. strokeStyle: 'transparent',
  15. strokeWidth: 5,
  16. strokeCap: 'butt',
  17. strokeJoin: 'miter',
  18. shadowX: 0,
  19. shadowY: 0,
  20. shadowBlur: 10,
  21. shadowColor: 'transparent',
  22. x: 0, y: 0,
  23. x1: 0, y1: 0,
  24. radius: 10,
  25. start: 0,
  26. end: 360,
  27. ccw: false,
  28. inDegrees: true,
  29. fromCenter: true,
  30. closed: false,
  31. sides: 3,
  32. angle: 0,
  33. text: '',
  34. font: 'normal 12pt sans-serif',
  35. align: 'center',
  36. baseline: 'middle',
  37. source: '',
  38. repeat: 'repeat'
  39. };
  40. // Duplicate original defaults
  41. jC.defaults = $.extend({}, jC.originals);
  42. // Set global properties
  43. function setGlobals(context, map) {
  44. context.fillStyle = map.fillStyle;
  45. context.strokeStyle = map.strokeStyle;
  46. context.lineWidth = map.strokeWidth;
  47. context.lineCap = map.strokeCap;
  48. context.lineJoin = map.strokeJoin;
  49. context.shadowOffsetX = map.shadowX;
  50. context.shadowOffsetY = map.shadowY;
  51. context.shadowBlur = map.shadowBlur;
  52. context.shadowColor = map.shadowColor;
  53. }
  54. // Close path if chosen
  55. function closePath(context, map) {
  56. if (map.closed === true) {
  57. context.closePath();
  58. context.fill();
  59. context.stroke();
  60. } else {
  61. context.fill();
  62. context.stroke();
  63. context.closePath();
  64. }
  65. }
  66. // Measure angles in degrees if chosen
  67. function checkUnits(map) {
  68. if (map.inDegrees === true) {
  69. return Math.PI / 180;
  70. } else {
  71. return 1;
  72. }
  73. }
  74. // Set canvas defaults
  75. $.fn.canvas = function(args) {
  76. // Reset defaults if no value is passed
  77. if (typeof args === 'undefined') {
  78. jC.defaults = jC.originals;
  79. } else {
  80. jC.defaults = $.extend({}, jC.defaults, args);
  81. }
  82. return this;
  83. };
  84. // Load canvas
  85. $.fn.loadCanvas = function(context) {
  86. if (typeof context === 'undefined') {context = '2d';}
  87. return this[0].getContext(context);
  88. };
  89. // Create gradient
  90. $.fn.gradient = function(args) {
  91. var ctx = this.loadCanvas(),
  92. // Specify custom defaults
  93. gDefaults = {
  94. x1: 0, y1: 0,
  95. x2: 0, y2: 0,
  96. r1: 10, r2: 100
  97. },
  98. params = $.extend({}, gDefaults, args),
  99. gradient, stops = 0, percent, i;
  100. // Create radial gradient if chosen
  101. if (typeof args.r1 === 'undefined' && typeof args.r2 === 'undefined') {
  102. gradient = ctx.createLinearGradient(params.x1, params.y1, params.x2, params.y2);
  103. } else {
  104. gradient = ctx.createRadialGradient(params.x1, params.y1, params.r1, params.x2, params.y2, params.r2);
  105. }
  106. // Count number of color stops
  107. for (i=1; i<=Number.MAX_VALUE; i+=1) {
  108. if (params['c' + i]) {
  109. stops += 1;
  110. } else {
  111. break;
  112. }
  113. }
  114. // Calculate color stop percentages if absent
  115. for (i=1; i<=stops; i+=1) {
  116. percent = Math.round((100 / (stops-1)) * (i-1)) / 100;
  117. if (typeof params['s' + i] === 'undefined') {
  118. params['s' + i] = percent;
  119. }
  120. gradient.addColorStop(params['s' + i], params['c' + i]);
  121. }
  122. return gradient;
  123. };
  124. // Create pattern
  125. $.fn.pattern = function(args) {
  126. var ctx = this.loadCanvas(),
  127. params = $.extend({}, jC.defaults, args),
  128. pattern,
  129. img = document.createElement('img');
  130. img.src = params.source;
  131. // Create pattern
  132. function create() {
  133. if (img.complete === true) {
  134. // Create pattern
  135. pattern = ctx.createPattern(img, params.repeat);
  136. } else {
  137. throw "The pattern has not loaded yet";
  138. }
  139. }
  140. try {
  141. create();
  142. } catch(error) {
  143. img.onload = create;
  144. }
  145. return pattern;
  146. };
  147. // Clear canvas
  148. $.fn.clearCanvas = function(args) {
  149. var ctx = this.loadCanvas(),
  150. params = $.extend({}, jC.defaults, args);
  151. // Draw from center if chosen
  152. if (params.fromCenter === true) {
  153. params.x -= params.width / 2;
  154. params.y -= params.height / 2;
  155. }
  156. // Clear entire canvas if chosen
  157. ctx.beginPath();
  158. if (typeof args === 'undefined') {
  159. ctx.clearRect(0, 0, this.width(), this.height());
  160. } else {
  161. ctx.clearRect(params.x, params.y, params.width, params.height);
  162. }
  163. ctx.closePath();
  164. return this;
  165. };
  166. // Save canvas
  167. $.fn.saveCanvas = function() {
  168. var ctx = this.loadCanvas();
  169. ctx.save();
  170. return this;
  171. };
  172. // Restore canvas
  173. $.fn.restoreCanvas = function() {
  174. var ctx = this.loadCanvas();
  175. ctx.restore();
  176. return this;
  177. };
  178. // Scale canvas
  179. $.fn.scaleCanvas = function(args) {
  180. var ctx = this.loadCanvas(),
  181. params = $.extend({}, jC.defaults, args);
  182. ctx.save();
  183. ctx.translate(params.x, params.y);
  184. ctx.scale(params.width, params.height);
  185. ctx.translate(-params.x, -params.y)
  186. return this;
  187. };
  188. // Translate canvas
  189. $.fn.translateCanvas = function(args) {
  190. var ctx = this.loadCanvas(),
  191. params = $.extend({}, jC.defaults, args);
  192. ctx.save();
  193. ctx.translate(params.x, params.y);
  194. return this;
  195. };
  196. // Rotate canvas
  197. $.fn.rotateCanvas = function(args) {
  198. var ctx = this.loadCanvas(),
  199. params = $.extend({}, jC.defaults, args),
  200. toRad = checkUnits(params);
  201. ctx.save();
  202. ctx.translate(params.x, params.y);
  203. ctx.rotate(params.angle * toRad);
  204. ctx.translate(-params.x, -params.y);
  205. return this;
  206. };
  207. // Draw rectangle
  208. $.fn.drawRect = function(args) {
  209. var ctx = this.loadCanvas(),
  210. params = $.extend({}, jC.defaults, args),
  211. toRad = checkUnits(params),
  212. x1, y1, x2, y2, r;
  213. setGlobals(ctx, params);
  214. // Draw from center if chosen
  215. if (params.fromCenter === true) {
  216. params.x -= params.width / 2;
  217. params.y -= params.height / 2;
  218. }
  219. // Draw rounded rectangle if chosen
  220. if (params.cornerRadius > 0) {
  221. x1 = params.x;
  222. y1 = params.y;
  223. x2 = params.x + params.width;
  224. y2 = params.y + params.height;
  225. r = params.cornerRadius;
  226. if ((x2 - x1) - (2 * r) < 0) {
  227. r = (x2 - x1) / 2;
  228. }
  229. if ((y2 - y1) - (2 * r) < 0) {
  230. r = (y2 - y1) / 2;
  231. }
  232. ctx.beginPath();
  233. ctx.moveTo(x1+r,y1);
  234. ctx.lineTo(x2-r,y1);
  235. ctx.arc(x2-r, y1+r, r, 270*toRad, 360*toRad, false);
  236. ctx.lineTo(x2,y2-r);
  237. ctx.arc(x2-r, y2-r, r, 0, 90*toRad, false);
  238. ctx.lineTo(x1+r,y2);
  239. ctx.arc(x1+r, y2-r, r, 90*toRad, 180*toRad, false);
  240. ctx.lineTo(x1,y1+r);
  241. ctx.arc(x1+r, y1+r, r, 180*toRad, 270*toRad, false);
  242. ctx.fill();
  243. ctx.stroke();
  244. ctx.closePath();
  245. } else {
  246. ctx.fillRect(params.x, params.y, params.width, params.height);
  247. ctx.strokeRect(params.x, params.y, params.width, params.height);
  248. }
  249. return this;
  250. };
  251. // Draw arc
  252. $.fn.drawArc = function(args) {
  253. var ctx = this.loadCanvas(),
  254. params = $.extend({}, jC.defaults, args),
  255. toRad = checkUnits(params);
  256. setGlobals(ctx, params);
  257. // Draw from center if chosen
  258. if (params.fromCenter === false) {
  259. params.x += params.radius;
  260. params.y += params.radius;
  261. }
  262. ctx.beginPath();
  263. ctx.arc(params.x, params.y, params.radius, (params.start*toRad)-(Math.PI/2), (params.end*toRad)-(Math.PI/2), params.ccw);
  264. // Close path if chosen
  265. closePath(ctx, params);
  266. return this;
  267. };
  268. // Draw ellipse
  269. $.fn.drawEllipse = function(args) {
  270. var ctx = this.loadCanvas(),
  271. params = $.extend({}, jC.defaults, args),
  272. controlW = params.width * (4/3);
  273. setGlobals(ctx, params);
  274. // Draw from center if chosen
  275. if (params.fromCenter === false) {
  276. params.x += params.width / 2;
  277. params.y += params.height / 2;
  278. }
  279. // Increment coordinates to prevent negative values
  280. params.x += 1e-10;
  281. params.y += 1e-10;
  282. // Create ellipse
  283. ctx.beginPath();
  284. ctx.moveTo(params.x, params.y-params.height/2);
  285. ctx.bezierCurveTo(params.x-controlW/2,params.y-params.height/2,
  286. params.x-controlW/2,params.y+params.height/2,
  287. params.x,params.y+params.height/2);
  288. ctx.bezierCurveTo(params.x+controlW/2,params.y+params.height/2,
  289. params.x+controlW/2,params.y-params.height/2,
  290. params.x,params.y-params.height/2);
  291. ctx.closePath();
  292. ctx.fill();
  293. ctx.stroke();
  294. return this;
  295. };
  296. // Draw line
  297. $.fn.drawLine = function(args) {
  298. var ctx = this.loadCanvas(),
  299. params = $.extend({}, jC.defaults, args),
  300. max = Number.MAX_VALUE, l,
  301. lx, ly;
  302. setGlobals(ctx, params);
  303. // Draw each point
  304. ctx.beginPath();
  305. ctx.moveTo(params.x1, params.y1);
  306. for (l=2; l<max; l+=1) {
  307. lx = params['x' + l];
  308. ly = params['y' + l];
  309. // Stop loop when all points are drawn
  310. if (typeof lx === 'undefined' || typeof ly === 'undefined') {
  311. break;
  312. }
  313. ctx.lineTo(lx, ly);
  314. }
  315. // Close path if chosen
  316. closePath(ctx, params);
  317. return this;
  318. };
  319. // Draw quadratic curve
  320. $.fn.drawQuad = function(args) {
  321. var ctx = this.loadCanvas(),
  322. params = $.extend({}, jC.defaults, args),
  323. max = Number.MAX_VALUE, l,
  324. lx, ly, lcx, lcy;
  325. setGlobals(ctx, params);
  326. // Draw each point
  327. ctx.beginPath();
  328. ctx.moveTo(params.x1, params.y1);
  329. for (l=2; l<max; l+=1) {
  330. lx = params['x' + l];
  331. if (typeof lx === 'undefined') break;
  332. ly = params['y' + l];
  333. if (typeof ly === 'undefined') break;
  334. lcx = params['cx' + (l-1)];
  335. if (typeof lcx === 'undefined') break;
  336. lcy = params['cy' + (l-1)];
  337. if (typeof lcy === 'undefined') break;
  338. ctx.quadraticCurveTo(lcx, lcy, lx, ly);
  339. }
  340. // Close path if chosen
  341. closePath(ctx, params);
  342. return this;
  343. };
  344. // Draw Bezier curve
  345. $.fn.drawBezier = function(args) {
  346. var ctx = this.loadCanvas(),
  347. params = $.extend({}, jC.defaults, args),
  348. max = Number.MAX_VALUE,
  349. l=2, lc=1, lx, ly, lcx1, lcy1, lcx2, lcy2, i;
  350. setGlobals(ctx, params);
  351. // Draw each point
  352. ctx.beginPath();
  353. ctx.moveTo(params.x1, params.y1);
  354. for (i=2; i<max; i+=1) {
  355. lx = params['x' + l];
  356. if (typeof lx === 'undefined') break;
  357. ly = params['y' + l];
  358. if (typeof ly === 'undefined') break;
  359. lcx1 = params['cx' + lc];
  360. if (typeof lcx1 === 'undefined') break;
  361. lcy1 = params['cy' + lc];
  362. if (typeof lcy1 === 'undefined') break;
  363. lcx2 = params['cx' + (lc+1)];
  364. if (typeof lcx2 === 'undefined') break;
  365. lcy2 = params['cy' + (lc+1)];
  366. if (typeof lcy2 === 'undefined') break;
  367. ctx.bezierCurveTo(lcx1, lcy1, lcx2, lcy2, lx, ly);
  368. l += 1;
  369. lc += 2;
  370. }
  371. // Close path if chosen
  372. closePath(ctx, params);
  373. return this;
  374. };
  375. // Draw text
  376. $.fn.drawText = function(args) {
  377. var ctx = this.loadCanvas(),
  378. params = $.extend({}, jC.defaults, args);
  379. setGlobals(ctx, params);
  380. // Set text-specific properties
  381. ctx.textBaseline = params.baseline;
  382. ctx.textAlign = params.align;
  383. ctx.font = params.font;
  384. ctx.strokeText(params.text, params.x, params.y);
  385. ctx.fillText(params.text, params.x, params.y);
  386. return this;
  387. };
  388. // Draw image
  389. $.fn.drawImage = function(args) {
  390. var ctx = this.loadCanvas(),
  391. params = $.extend({}, jC.defaults, args),
  392. // Define image source
  393. img = document.createElement('img');
  394. img.src = params.source;
  395. setGlobals(ctx, params);
  396. // Draw image function
  397. function draw() {
  398. if (img.complete) {
  399. var scaleFac = img.width / img.height;
  400. // If width/height are specified
  401. if (typeof args.width !== 'undefined' && typeof args.height !== 'undefined') {
  402. img.width = args.width;
  403. img.height = args.height;
  404. // If width is specified
  405. } else if (typeof args.width !== 'undefined' && typeof args.height === 'undefined') {
  406. img.width = args.width;
  407. img.height = img.width / scaleFac;
  408. // If height is specified
  409. } else if (typeof args.width === 'undefined' && typeof args.height !== 'undefined') {
  410. img.height = args.height;
  411. img.width = img.height * scaleFac;
  412. }
  413. // Draw from center if chosen
  414. if (params.fromCenter === true) {
  415. params.x -= img.width / 2;
  416. params.y -= img.height / 2;
  417. }
  418. // Draw image
  419. ctx.drawImage(img, params.x, params.y, img.width, img.height);
  420. } else {
  421. throw "The image has not loaded yet.";
  422. }
  423. }
  424. function dodraw() {
  425. // console.log("dodraw...");
  426. try {
  427. // console.log("dodraw...try...");
  428. draw();
  429. }
  430. catch(error) {
  431. // console.log("dodraw...catch: " + error);
  432. }
  433. }
  434. // Draw image if already loaded
  435. // console.log("--------------------");
  436. // console.log("drawImage " + img.src);
  437. try {
  438. // console.log("try...");
  439. draw();
  440. } catch(error) {
  441. // console.log("catch: " + error);
  442. img.onload = dodraw;
  443. }
  444. return this;
  445. };
  446. // Draw polygon
  447. $.fn.drawPolygon = function(args) {
  448. var ctx = this.loadCanvas(),
  449. params = $.extend({}, jC.defaults, args),
  450. theta, dtheta, x, y,
  451. toRad = checkUnits(params), i;
  452. setGlobals(ctx, params);
  453. if (params.sides >= 3) {
  454. // Calculate points and draw
  455. theta = (Math.PI/2) + (Math.PI/params.sides) + (params.angle*toRad);
  456. dtheta = (Math.PI*2) / params.sides;
  457. for (i=0; i<params.sides; i+=1) {
  458. x = params.x + (params.radius * Math.cos(theta)) + 1e-10;
  459. y = params.y + (params.radius * Math.sin(theta)) + 1e-10;
  460. if (params.fromCenter === false) {
  461. x += params.radius;
  462. y += params.radius;
  463. }
  464. ctx.lineTo(x, y);
  465. theta += dtheta;
  466. }
  467. closePath(ctx, params);
  468. }
  469. return this;
  470. };
  471. return window.jCanvas = jC;
  472. }(jQuery, document, Math, Number));