জাভাস্ক্রিপ্ট ক্যানভাস লাইব্রেরি বর্তমান রাষ্ট্র? [বন্ধ]


90

আমি এইচটিএমএল ক্যানভাস লাইব্রেরিতে গবেষণা করে চলেছি এবং আমি এই প্রশ্নটি পেয়েছি across এইচটিএমএল ক্যানভাস জাভাস্ক্রিপ্ট লাইব্রেরি এবং ফ্রেমওয়ার্কগুলিতে শিল্পের বর্তমান অবস্থা কী? এটি 2010 সালে জিজ্ঞাসা করা হয়েছিল। শীর্ষ উত্তরটি ছিল ফ্যাব্রিক.জেএস। কিছুটা আরও গবেষণা করার পরে আমি http://www.html5canvastutorials.com/ জুড়ে এসেছি যা গতিময় একাধিক ক্যানভাসগুলি নিয়ে গর্ব করে, কিনেটিকজেগুলির টিউটোরিয়ালগুলি বৈশিষ্ট্যযুক্ত। আরও কিছু গবেষণা পরে প্রকাশিত হয়েছে যে ক্যানভাস লাইব্রেরিগুলি যখন গতি এবং বৈশিষ্ট্যগুলির ক্ষেত্রে আসে তখন পুরো জায়গা জুড়ে মনে হয়। জাভাস্ক্রিপ্ট ক্যানভাস লাইব্রেরি এবং ফ্রেমওয়ার্ক বর্তমান অবস্থা কি? এক উপরে এসেছেন?

সম্পাদনা: যেহেতু গ্রন্থাগারগুলি সর্বদা পরিবর্তিত হয় এবং প্রচুর লোক সম্প্রতি নতুন লাইব্রেরিতে সংবাদ এবং তথ্যের জন্য এখানে আসছেন আমি প্রশ্নটিকে আরও কালজয়ী হিসাবে পরিবর্তন করেছি।


4
একেবারে আমি বিশ্বাস করি বিকল্পগুলি এর মতো দেখায়: 2 ডি-প্রসঙ্গ -> গতিশীল জেএস, ফ্যাব্রিক.জেএস, কাগজ.জেএস, বা ইজেল.জেএস। 3 ডি-প্রসঙ্গ (ওয়েবজিএল) -> থ্রি.জেএস
এরিক রোয়েল

4
আপনি ক্যানভাস লাইব্রেরির তুলনায় কঙ্গাক্সের লিঙ্কটি পরীক্ষা করে দেখতে পারেন। এখানে docs.google.com/spreadsheet/… পুনরায় পোস্ট করা হচ্ছে
এরিকবোডন

4
আমি অবাক হয়েছি এই প্রশ্নটি এখনও বন্ধ হয়নি কারণ এখানে সাধারণভাবে সমস্ত কিছুই বন্ধ হয়ে যায়। আমি উত্তর দিতে চাই তবে আমি খুব ভয় পেয়েছি ("আতঙ্কিত" পড়ুন) কারণ এটি বিষয়টিকে বিবেচনা করা উচিত M মাইবে আপনি যদি "এই জাতীয়তা / ট্রেড অফগুলি কী" এই প্রশ্নের উত্তর দিয়ে থাকেন তবে আমি আমার দুটি সেন্ট যুক্ত করতে পারি ("উত্তর" পড়ুন)
puk

4
আমি @ পুকের মতোই অনুভব করছি। অতিরিক্তভাবে, আমি মনে করি যে মূলত কেবল "ওপেন-এন্ড" এবং "গঠনমূলক নয়" হিসাবে চিহ্নিত হওয়াগুলির মধ্যে শব্দার্থ বিদ্বেষ মজাদার। এটি মোটামুটি প্রশ্নগুলি অনুবাদ করার জন্য অনুবাদ করে যার জন্য একটি অদম্য উত্তর সম্ভব নয় প্রোগ্রামিং জ্ঞানের বিশ্বে সবচেয়ে জনপ্রিয় এবং বিস্তৃত ভাণ্ডারগুলিতে বিবেচ্য নয়। আমি পেয়েছি যে তারা একটি ভাল 'কিউ + এ' ফিট করে না তবে কেন কেবল এগুলিকে 'অত্যন্ত সাবজেক্টিভ' হিসাবে চিহ্নিত করবেন না, রেপ পয়েন্টগুলি ক্যাপ করুন এবং তাদেরকে খোলা রাখুন ... কিছু।
মার্ক ফক্স

4
কেবলমাত্র এসওয়ের পক্ষে বিষয়টি বিবেচনা করে যে আমি খুব কার্যকারী প্রশ্নগুলির ধ্রুবক বন্ধ হওয়াতে বিরক্ত হয়ে পড়েছি কারণ তারা কেবল বিষয়গত। তাতে কি!? এটি রক্তাক্ত দরকারী জিনিস।
আয়ান ডানকান

উত্তর:


80

দাবি অস্বীকার : আমি ফ্যাব্রিক.জেএস এর লেখক ।

আমি বলব যে Easel.js, Fabric.js, এবং Paper.js এই মুহূর্তে সর্বাধিক ব্যবহৃত হয়। আমি প্রতিটি সংগ্রহস্থলের জন্য গিথুব পর্যবেক্ষকদের সংখ্যা, তাদের গুগল গ্রুপগুলিতে আলোচনার পরিমাণ, এবং টুইটারে ক্যানভাস লাইব্রেরি হিসাবে কত বার ব্যবহার করেছি সে সম্পর্কে আমি শুনেছি।

এগুলি আরও কম-বেশি শালীন ডকুমেন্টেশন, উদাহরণ / ডেমো, আলোচনার দল এবং ইউনিট পরীক্ষাগুলি সহ রয়েছে (বেশিরভাগ অন্যান্য ক্যানভাস লাইব্রেরিতে পরীক্ষার অবস্থা বেশ দুঃখজনক)।

আমি বিভিন্ন ক্যানভাস লাইব্রেরির এই তুলনা টেবিলটিও বজায় রাখছি , যেখানে আপনি দেখতে পাচ্ছেন যে কীভাবে লাইব্রেরিটি সম্প্রতি আপডেট হয়েছিল, এর আকার, আই <9 বা নোড.জেএস এর জন্য সমর্থন এবং আরও অনেক কিছু।


আপনার তুলনাটি প্রচুর তথ্য দেয় তবে এর সর্বজনীনভাবে সম্পাদনযোগ্য যা সীমাবদ্ধ করা উচিত, কারণ অন্য কিছু ব্যবহারকারী ভুলভাবে এগুলি সম্পাদনা করবেন। আমার একটি সহায়তা দরকার যে গতিশক্তিগুলি নোডজকে সমর্থন করবে না? এবং আপনি উইন্ডো পেইন্ট প্রোগ্রামের মতো একটি উদাহরণ দিতে পারেন (আপনার ফ্যাব্রিকের সাথে অবজেক্ট বৃত্তটি সরাসরি আঁকুন)
থিরুমালাই মুর্গান

এটি সর্বজনীনভাবে সম্পাদনযোগ্য নয়
কঙ্গাক্স

4
এত ভাগ্যবান যে আমি এই পোস্টটি খুঁজে পেয়েছি! কাইনেটিকের সাথে কাজ করতে ব্যবহৃত তবে এটি এখনও পরিপক্ক নয়। তারপরে aseসেল চেষ্টা করে দেখলেন, তবে এটি খুব ভারী। অবশেষে ফ্যাব্রিকে সরানো হয়েছে, এবং এটি দুর্দান্ত!
মেইলাইট

@ কংগ্যাক্স মিস বোঝার জন্য দুঃখিত, আপনি কি উইন্ডো পেইন্ট প্রোগ্রামের মতো একটি উদাহরণ দিতে পারেন (আপনার ফ্যাব্রিকের সাথে অবজেক্ট
সার্কেলটি সরাসরি আঁকতে

@ তিরুমালাইমুরুগান আপনি এখানে যান: jsfiddle.net/fabricjs/nXmTC/1
কঙ্গাক্স

66

সম্পাদনা: गतिগত জেএস আর সক্রিয়ভাবে রক্ষণাবেক্ষণ করা হচ্ছে না।

দাবি অস্বীকার: আমি কিনেটিকজেএস তৈরি করেছি

কিনেটিকজেএস আসলে বেশ ভাল করছে। আপনি গিথুব এ উত্স কোডটি সন্ধান করতে পারেন , যেখানে এই মুহুর্তে এটি 2180 জন তারকৃত।

এটি হাজার হাজার একযোগে আকারগুলি পরিচালনা করতে পারে:

10,000 টানুন এবং ড্রপ স্ট্রেস টেস্ট: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-DP-stress-test-with-1000-shapes/

টুলটিপস সহ 10,000 টি আকার: http://www.html5canvastutorials.com/labs/html5-canvas-10000- shape-stress-test-with-kineticjs /

মোবাইল ইভেন্ট সহ এটির খুব ভাল ইভেন্ট সমর্থন রয়েছে এবং এতে 100 টি ইউনিট পরীক্ষার একটি দুর্দান্ত স্যুট রয়েছে যাতে কোড বেসটি বেশ শক্ত মনে হয়।

কঙ্গাক্স: ফেব্রিক.জেএস এর সাথে পিএস দুর্দান্ত কাজ! কিনেটিকজেএস (অবশ্যই) ব্যতীত আমার অন্য দুটি প্রিয় লাইব্রেরি হ'ল ফ্যাব্রিক এবং কাগজ।


7
ডেমো এবং পারফরম্যান্সকে স্রেফ তাকিয়ে দেখলে দেখতে দুর্দান্ত লাগে! আপনি ইউনিট পরীক্ষা পেয়েছি শুনে খুশি। আমি আপনাকে একাধিক স্তর তৈরির অনুমতি দিচ্ছি allow ওটা সুন্দর. ফ্যাব্রিকগুলিতে, আমরা একইভাবে অনুকূলিত করি তবে কেবল দুটি স্তর রয়েছে - একটি নির্বাচনের জন্য, একটি অঙ্কনের জন্য - এবং অভ্যন্তরীণভাবে (ব্যবহারকারীরা আরও তৈরি করতে পারে না)। লাইব্রেরি তুলনা চার্ট তৈরি করার সময় কোনওভাবেই আমি গতিময় মিস করেছি। আমাদের এটি ঠিক করা উচিত :)
কঙ্গাক্স

6
আপডেট: কিনেটিকজেএস এখন গিথুবে রয়েছে: github.com/ericdrowell/KineticJS
এরিক রাওয়েল

7
কীটেটিকজেএস ইএসেলজেএস এর সাথে কীভাবে তুলনা করে? কোনটি কখন ব্যবহার করা উচিত?
geeky_monster

4
এটি উল্লেখ করতে চাই যে কিনেটিকজেএস এসভিজি ভেক্টরকে কাইনেটিক.পথ () আকারের এইচটিএমএল 5
এরিক

4
@ এরিকরওয়েল মেট আমি কাইনেটিকজেএস, তার গতি, জিএসএপির সাথে বিবাহকে ভালবাসি, তবে আমার মাথা স্পিনটি কীভাবে ফ্যাব্রিকজেএস-এর মতো কাইনেটিকজেএস অবজেক্টগুলিকে অবাধে রূপান্তর করার উপায় আছে? আমি যা বলার চেষ্টা করছি তার লিঙ্কটি এখানে উল্লেখ করা হয়েছে: ফ্যাব্রিকজেএস / কাস্টমাইজেশন আমি ফ্যাব্রিকজেসকে এটির ধীর হিসাবে ব্যবহার করতে চাই না এবং বিভিন্ন ইউনিট পরীক্ষাগুলিতে এর কম কার্যকারিতাও স্পষ্ট ident আমি সত্যিই কিন্তেটজেএসে অবাধে রূপান্তর করতে সক্ষম হওয়ার উপায় অনুসন্ধান করার অপেক্ষায় রয়েছি কারণ এটি জীবনকে আরও সহজ করে তুলবে। ধন্যবাদ, প্রাণে
praneybehl

62

জানুয়ারী 2013 হিসাবে সাম্প্রতিক পাঠকদের জন্য, আমি মূল্যায়ন করেছি:

  • গতিময়
  • ফ্যাব্রিক
  • কাগজ
  • ইজেল

"মূল্যায়ন" দ্বারা, আমি কেবল ডক্সটি পড়ার চেয়ে আরও বেশি কিছু করেছি; আমি একটি প্রোটোটাইপ অ্যাপ তৈরি করেছি।

আমি ফ্যাব্রিক দিয়ে শুরু করেছি কারণ এটি মনে হয় বৃহত্তম সম্প্রদায় রয়েছে এবং ভেবেছিল এটি আমার সমাধান হবে। তবে, আমি নিম্নলিখিত কারণে ফ্যাব্রিককে ছেড়ে দিয়েছি:

  • অদ্ভুত এবং অননুমোদিত এপিআই এর অসঙ্গতি যা আমার প্রচুর সময় অকারণে পুড়িয়ে ফেলে।
  • অসামঞ্জস্যপূর্ণ পয়েন্টার ইভেন্ট সমর্থন। বিশেষত, ফ্যাব্রিক একটি "পথ "টিকে সত্য আকারের অবজেক্ট হিসাবে বিবেচনা করে না যা নির্বাচনযোগ্য এবং পর্যবেক্ষণযোগ্য। ইন্টারেক্টিভ পাথগুলি আমার অ্যাপ্লিকেশনের একটি প্রধান প্রয়োজন হওয়ায় এটি আমার প্রয়োজনীয়তা পূরণ করতে পারেনি।
  • ক্যানভাসে অবজেক্টগুলিতে অবস্থান করার জন্য অনুবাদগুলির পর্দার আড়ালে। আমার জন্য, ফ্যাব্রিক বিকাশকারী কী করছে তা স্পষ্ট না করে এ বিষয়ে খুব চালাক হওয়ার চেষ্টা করে।
  • মিথস্ক্রিয়া, পুনরায় আকার এবং ইন্টারেক্টিভিটি কীভাবে কাজ করে তা ঘোরানোর বিষয়ে অতিরিক্ত দৃ opinion় মতামত। বিভিন্ন উপায়ে, এই কার্যকারিতাটি কাঠামোর মধ্যে তৈরি করা খুব দুর্দান্ত তবে আমার ক্ষেত্রে, এটি যেভাবে বাস্তবায়িত হয়েছিল তার মানে যেভাবেই হোক না কেন নিজেকে এটিকে পুনরায় প্রতিস্থাপন করতে হবে তার সাথে আমি একমত হইনি।
  • স্পার্স ডকুমেন্টেশন - অনেকগুলি ক্ষেত্রে সেই পদ্ধতির যেখানে কোনও পদ্ধতির ডকুমেন্টেশন ফর্মটির: "সেটএক্স (ওয়াই) - এক্সটি টু ওয়াই" :-)

আমি কাগজটি দেখেছি এবং খুব বেশি দূরে পেলাম না। এটি আমার কাছে অত্যধিক অবসন্ন মনে হয়েছিল এবং এটি খুব মল আইএমওর মধ্যে পড়ে - এটি ক্যানভাসের জন্য একটি সাধারণ অবজেক্ট মডেল হিসাবে ভিজ্যুয়ালাইজেশন লাইব্রেরির খুব বেশি তবে ডি 3 এর সাথে প্রতিযোগিতা করার জন্য এটি ভিজ্যুয়ালাইজেশন লাইব্রেরির পক্ষে যথেষ্ট নয়। এছাড়াও, ডকুমেন্টেশন আবার বিশেষ অ্যাক্সেসযোগ্য ছিল না।

আমি মনে করি যদি আপনার কোনও ফ্ল্যাশ / অ্যাকশনস্ক্রিপ্টের পটভূমি থাকে তবে আমি তা না করে ইজেল সম্ভবত প্রচুর পরিমাণে জ্ঞান অর্জন করবে। এছাড়াও, এটি আমার প্রয়োজনীয়তার জন্য অত্যধিক গেম-কেন্দ্রিক বলে মনে হয়েছিল। কফিনের পেরেকটি আবার ডকুমেন্টেশন ছিল - পর্যাপ্ত নয় এবং অ-মানক বিন্যাসে উপস্থাপিত হয়েছিল।

সুতরাং, আমি কিনেটিকের সাথে শেষ করেছি কারণ:

  • সত্যিই সমৃদ্ধ এবং পরিষ্কার টিউটোরিয়াল এবং উদাহরণ
  • এপিআই ফাংশনগুলি তাদের বলা হয় এবং মুলত অনুমানযোগ্য - দ্রুত উত্পাদনশীলতা, অগভীর শেখার বক্ররেখা
  • এটি কী করে এবং কী করে না সে সম্পর্কে যুক্তিসঙ্গতভাবে পরিষ্কার - এটি অন্যদের কারও মতো সমৃদ্ধ নয় তবে এটি একটি সুবিধা; এটি কিছু কম কাজ করে তবে সেগুলি আরও ভাল করে
  • পাথগুলি হ'ল প্রথম শ্রেণীর নাগরিক আকার, অন্য আকারের মতো, যা আমার প্রয়োজনীয়তার জন্য অপরিহার্য ছিল।

গতিশক্তি কোনও উপায়ে নিখুঁত নয় এবং কয়েকবার এমনও হয়েছে যখন কভারগুলির নিচে আসলে কী চলছে তা বের করার জন্য আমাকে উত্স কোডের গভীরে ডুব দিতে হয়েছিল। এছাড়াও, আমি এসবিজি পার্সিং এবং ফ্যাব্রিকের আউটপুটটি মিস করি।


4
এই উত্তরের জন্য ধন্যবাদ, আমাকে অনেক সময় বাঁচিয়েছে। আমি কিনেটিকের সাথে যাচ্ছি, এবং আশা করি আপনি ইতিমধ্যে যা বলেছিলেন তা আবিষ্কার করবেন।
বাশেভিস

আমি উপরের লাইব্রেরিগুলিতে আইপ্যাড 3 এবং স্যামসুং গ্যালাক্সি ট্যাব 2-র জন্য সরবরাহিত ড্র্যাগ-অ্যান্ড-ড্রপ ডেমোগুলির একটি বৈজ্ঞানিক ব্যবহারকারী পরীক্ষা করেছি। কাইনেটিকজেএস এখানে স্পষ্ট বিজয়ী হিসাবে প্রকাশিত হয়েছে, আরও স্পর্শকাতর এবং এর স্পর্শ অবস্থানে আরও সঠিক।
পের কুইস্টেড আরনসন

4
আমি উভয়ই মূল্যায়ন করছি, এবং এই মুহুর্তের জন্য আন্তরিকভাবে ফ্যাব্রিকগুলি আরও সম্পূর্ণ এবং ভাল নথিভুক্ত বলে মনে হচ্ছে।
albanx

9
জেরেমি, আমি ফ্যাব্রিকের এপিআই অসঙ্গতি সম্পর্কে আরও শুনতে পছন্দ করব । আমি এটি যথাসম্ভব স্বজ্ঞাগত করার চেষ্টা করি তাই যদি কিছু এখনও অদ্ভুত থাকে তবে আমি অবশ্যই এটির যত্ন নিতে চাই। আপনি কি এখানে টিকিট দায়ের করতে পারেন বা উল্লেখ করতে পারেন? ডকসগুলি জানুয়ারীর পর থেকে উন্নত হয়েছে, যদিও এখনও আমি সেগুলি করার মতো পছন্দ করি না not ইন্টারঅ্যাক্টিভিটির দৃ opinion় মতামত - আমি অনুমান করি আপনি এটি বলতে পারেন, যদিও আপনি করতে পারেন এমন প্রচুর টুইট রয়েছে। আপনি ঠিক কি চেয়েছিলেন? অবশেষে, পয়েন্টার ইভেন্টগুলি - আপনার অর্থ কী তা নিশ্চিত হন না। পাথ অবশ্যই একটি আসল আকৃতি: fabricjs.com/quadratic-curve
kangax

23

আমি খুব পিক্সিজ সুপারিশ করব। এটি একটি উচ্চ কার্যকারিতা ক্যানভাস লাইব্রেরি।

পিক্সি.জেএস হ'ল একটি 2 ডি ওয়েবজিএল একটি বিরামবিহীন ক্যানভাস ফ্যালব্যাক সহ যা ডেস্কটপ এবং মোবাইল উভয় আধুনিক ব্রাউজারে কাজ করতে সক্ষম করে।

http://www.goodboydigital.com/pixi-js-is-out/


4
জুলাই ২০১৪ পর্যন্ত, এটি এখানে সেরা ক্যানভাস লাইব্রেরির মতো মনে হচ্ছে। 4 কে লোক নিয়ে এটি গিথুবে অভিনয় করেছে এবং এটি বড় সংস্থা এবং এজেন্সিগুলি ব্যবহার করে। গুগলের মতো পিক্সিজ.কম / প্রকল্পগুলি
ভেনসোহ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.