এইচটিএমএল 5 - ক্যানভাস উপাদান - একাধিক স্তর

Question

কোনও এক্সটেনশন লাইব্রেরি ছাড়া, একই ক্যানভাস উপাদানটিতে একাধিক স্তর থাকা কি সম্ভব?

সুতরাং আমি যদি উপরের স্তরে একটি ক্লিয়াররেট করি তবে এটি নীচেরটিটি মুছবে না?

ধন্যবাদ।

Comments

আপনি Radikalfx.com/2009/10/16/canvas-collage এ একবার দেখতে চান । তিনি এক ধরণের "স্তর" কৌশল ব্যবহার করেন।

— ম্যাথু

এটি পরীক্ষা করে দেখুন .. html5.litten.com/using-m Multiple-html5-canvases-as-layers এর সাহায্যে আপনার সমস্যাটি যথাযথভাবে সমাধান করতে সহায়তা করবে

— দক্ষিণিকা

@ দক্ষিণিকা এই লিঙ্কটির জন্য আপনাকে ধন্যবাদ, এটি কয়েক বছর আগে ক্যানভাসটি ব্যবহার করার একটি সমস্যাটির ব্যাখ্যা দিয়েছিল যে একটি গ্রন্থাগার আমার জন্য যত্ন নিয়েছিল।

— Fering

Answer 1

না, তবে, আপনি <canvas>একে অপরের উপরে একাধিক উপাদান স্তর করতে পারেন এবং অনুরূপ কিছু অর্জন করতে পারেন।

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

আপনার প্রথম স্তরটি layer1ক্যানভাসে এবং দ্বিতীয় স্তরটি ক্যানভাসে আঁকুন layer2। তারপরে আপনি যখন clearRectশীর্ষ স্তরে থাকবেন তখন নীচের ক্যানভাসে যা কিছু আছে তা প্রদর্শিত হবে।

Comments

কোনও স্তরটি গোপন / লুকিয়ে রাখার কোন উপায় আছে .. যেমন আমি স্তর 1 এবং স্তর 2টি লুকিয়ে রাখতে পারি এবং যখন প্রয়োজন হয় তখন তদ্বিপরীতও করতে পারি .. ??

— জারাকি

আপনি এটি CSS সহ লুকিয়ে রাখতে পারেন - যেমন display: none;। অথবা কেবল ক্যানভাসটি সাফ করুন, যদি স্তরটি দেখানো উচিত তখন আবার এটি পুনরায় আঁকা খুব ব্যয়বহুল না হয়।

— জিমর

'বাম' এবং 'শীর্ষ' তে নির্ধারিত মানগুলির '0px' হওয়া দরকার, '0' নয়।

— ব্রায়ান গ্রিন 16

@ ব্রায়ানগ্রিন সত্য নয় "তবে, শূন্য দৈর্ঘ্যের জন্য ইউনিট শনাক্তকারী alচ্ছিক (যেমন সিনট্যাকটিকালি <নাম্বার> 0 হিসাবে উপস্থাপিত হতে পারে)"। w3.org/TR/css3-values/# দৈর্ঘ্য

— xehpuk

আমি একাধিক ক্যানভাসের জন্য কম্পোজিশনের ধরণটি নিয়ন্ত্রণ করতে পারি?

— জিয়ুয়াং

Answer 2

এর সাথে সম্পর্কিত:

আপনার ক্যানভাসে যদি আপনার কিছু থাকে এবং আপনি এর পিছনে কিছু আঁকতে চান - আপনি প্রসঙ্গের সাথে যুক্ত করতে পারেন lo লোকালকম্পেশন অপারেটিং সেটিংটি 'গন্তব্য-ওভার'-এ পরিবর্তন করুন এবং তারপরে আপনি' সোর্স-ওভার 'এ ফিরে আসবেন আবার হয়ে গেল

   var context = document.getElementById('cvs').getContext('2d');

    // Draw a red square
    context.fillStyle = 'red';
    context.fillRect(50,50,100,100);



    // Change the globalCompositeOperation to destination-over so that anything
    // that is drawn on to the canvas from this point on is drawn at the back
    // of what's already on the canvas
    context.globalCompositeOperation = 'destination-over';



    // Draw a big yellow rectangle
    context.fillStyle = 'yellow';
    context.fillRect(0,0,600,250);


    // Now return the globalCompositeOperation to source-over and draw a
    // blue rectangle
    context.globalCompositeOperation = 'source-over';

    // Draw a blue rectangle
    context.fillStyle = 'blue';
    context.fillRect(75,75,100,100);

<canvas id="cvs" />

Comments

হ্যাঁ, এটি ঠিক আছে তবে মুছে ফেলার ক্ষেত্রে, যেমন প্রশ্ন করা হয়েছিল। এটি উভয় স্তর সমান্তরালভাবে মুছে ফেলবে। যা আবার সঠিক নয়।

— পরদীপ জৈন

Answer 3

আপনি canvasডকুমেন্টে সংযুক্ত না করে একাধিক উপাদান তৈরি করতে পারেন । এগুলি আপনার স্তরগুলি হবে :

তারপরে আপনি তাদের সাথে যা খুশি তাই করুন এবং শেষে কেবল তাদের সামগ্রীটি গন্তব্য ক্যানভাসে সঠিক ক্রমে রেন্ডার drawImageকরুন context।

উদাহরণ:

/* using canvas from DOM */
var domCanvas = document.getElementById('some-canvas');
var domContext = domCanvas.getContext('2d');
domContext.fillRect(50,50,150,50);

/* virtual canvase 1 - not appended to the DOM */
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50,50,150,150);

/* virtual canvase 2 - not appended to the DOM */    
var canvas2 = document.createElement('canvas')
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = 'yellow';
ctx2.fillRect(50,50,100,50)

/* render virtual canvases on DOM canvas */
domContext.drawImage(canvas, 0, 0, 200, 200);
domContext.drawImage(canvas2, 0, 0, 200, 200);

এবং এখানে কিছু কোডেন রয়েছে: https://codepen.io/anon/pen/mQWMMW

Comments

@ এসসিএলিও আপনি বলেছেন "পারফরম্যান্স কিলার। প্রায় ~ 10 গুণ ধীর" সম্পূর্ণ ভুল is কোনও একক ডিওএম ক্যানভাস ব্যবহার এবং ডিওএম-তে ক্যানভাস স্ট্যাক করার চেয়ে দ্রুত অফস্ক্রিন ক্যানভ্যাসগুলি রেন্ডারিংয়ের ক্ষেত্রে নির্ভর করে। সাধারণ ভুলটি হল রেন্ডারিং কলগুলি বেঞ্চমার্কিং, ক্যানভাস ড্র কলগুলি সময়সীমার হতে পারে, ডোম রেন্ডারিং জাভাস্ক্রিপ্টের প্রেক্ষাপটের বাইরে এবং সময়সীমাবদ্ধ হতে পারে না। ফলাফলটি হ'ল ডিওএম স্ট্যাকড ক্যানভাসটি বেঞ্চমার্কে অন্তর্ভুক্ত

— কমপোজিটিং

@ ব্লাইন্ডম্যান 67 আমি জানি আপনি কী বলতে চাইছেন। এই বেঞ্চমার্কটি মাত্র চেকআউট করুন: jsfiddle.net/9a9L8k7k/1 । আপনি যদি ভুল বুঝে থাকেন তবে তিনটি ক্যানভ্যাস রয়েছে, ক্যানভাস 1 (সিটিএক্সএক্স 1) একটি আসল ক্যানভাস। ক্যানভাস 2 (সিটিএক্স 2) এবং ক্যানভাস 3 (সিটিএক্স) বন্ধ রয়েছে are চিত্রটি আগে ctx3 এ রেন্ডার করা হয়েছে। এই মাপদণ্ডের 1 পরীক্ষায়, আমি সরাসরি সিটিএক্স 3 সিটিএক্স 1 তে রেন্ডার করি। পরীক্ষা 2 এ, আমি সিটিএক্স 3 র সিটিএক্স 2 এবং তারপরে সিটিএক্স 2 কে সিটিএক্স 1 তে রেন্ডার করি। পরীক্ষা 2 আমার কম্পিউটারে টেস্ট 1 এর চেয়ে 30 গুণ ধীর। এজন্য আমি বলছি মধ্যবর্তী ক্যানভাস ব্যবহার করা অনেক ধীর।

— এসসিএলইও

@ ব্লাইন্ডম্যান 67 অফ-স্ক্রিন ক্যানভাসটি কেবল তখনই কাজ করে যখন অফ-স্ক্রিন ক্যানভাস স্থির থাকে। গতিশীল ক্যানভ্যাসগুলি ব্যবহারের ফলে পারফরম্যান্সের ক্ষতি হবে। (আবার আমি যা বলার চেষ্টা করছি তা হল গতিশীল অফ-স্ক্রিন ক্যানভাস অত্যন্ত ধীর গতির তাই সম্ভবত এই কৌশলটি (একাধিক অফ-স্ক্রিন ক্যানভাস দ্বারা মক স্তরগুলি কাম্য হবে না))

— এসসিএলইও

@ ব্লাইন্ডম্যান 67 গুরুত্বপূর্ণ: বেঞ্চমার্কের ঠিকানা https://jsfiddle.net/9a9L8k7k/3 , আমি সম্পাদনার পরে সংরক্ষণ করতে ভুলে গিয়েছি এবং স্ট্যাক ওভারফ্লো আমাকে আগের মন্তব্যটি আর পরিবর্তন করতে দেয় না ...

— এসসিএলইও

@ ব্লাইন্ডম্যান 67 আমি দুঃখিত, এটি আমার ভুল। আমি পরীক্ষা করে দেখেছি যে একাধিক অফ স্ক্রিন ক্যানভাস ব্যবহার করা খুব মসৃণ। আমি এখনও নিশ্চিত নই কেন সেই বেঞ্চমার্কটি দেখায় যে অফ স্ক্রিন ক্যানভাসটি ব্যবহার করা এত ধীর।

— এসসিএলিও

Answer 4

আমারও একই সমস্যা ছিল, আমি যখন অবস্থান সহ একাধিক ক্যানভাস উপাদানগুলি করছি: নিখুঁত কাজটি করে, আপনি যদি কোনও চিত্রের মধ্যে আউটপুট সংরক্ষণ করতে চান, এটি কার্যকর হবে না।

সুতরাং আমি এগিয়ে গেলাম এবং কোডগুলিতে একটি সাধারণ লেয়ারিং "সিস্টেম" করলাম যেন প্রতিটি স্তরের নিজস্ব কোড রয়েছে তবে এটি সমস্ত একই উপাদান হিসাবে রেন্ডার হয়ে যায়।

https://github.com/federicojacobi/layeredCanvas

আমি অতিরিক্ত ক্ষমতা যুক্ত করার ইচ্ছা করি, তবে আপাতত তা করবে।

আপনি একাধিক ফাংশন করতে পারেন এবং "জাল" স্তরগুলির জন্য তাদের কল করতে পারেন।

Comments

এই এক নিখুঁত।

— নাদির

Answer 5

আপনি http://www.concretejs.com যাচাইও করতে পারেন যা একটি আধুনিক, লাইটওয়েট, এইচটিএমএল 5 ক্যানভাস ফ্রেমওয়ার্ক যা হিট সনাক্তকরণ, লেয়ারিং এবং প্রচুর অন্যান্য পেরিফেরিয়াল জিনিস সক্ষম করে। আপনি এই জাতীয় জিনিসগুলি করতে পারেন:

var wrapper = new Concrete.Wrapper({
  width: 500,
  height: 300,
  container: el
});

var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();

wrapper.add(layer1).add(layer2);

// draw stuff
layer1.sceneCanvas.context.fillStyle = 'red';
layer1.sceneCanvas.context.fillRect(0, 0, 100, 100);

// reorder layers
layer1.moveUp();

// destroy a layer
layer1.destroy();

Comments

এই স্তরগুলি কীভাবে ডোমে শেষ হবে? প্রতিটি সিএসএসের মাধ্যমে অ্যাক্সেসযোগ্য?

— গারাভানি

Answer 6

আমি বুঝতে পারি যে Q একটি লাইব্রেরি ব্যবহার করতে চায় না, তবে গুগল অনুসন্ধান থেকে আগত অন্যদের জন্য আমি এটি সরবরাহ করব। @ এরিকরওয়েল একটি ভাল প্লাগইন উল্লেখ করেছেন, তবে, আপনি চেষ্টা করতে পারেন এমন আরও একটি প্লাগইন রয়েছে, এইচটিএমএল 2 ক্যানভাস ।

আমাদের ক্ষেত্রে আমরা z-indexএকটি "পণ্য নির্মাতা" উইজেট হিসাবে স্তরযুক্ত স্বচ্ছ পিএনজি ব্যবহার করছি । এইচটিএমএল 2 ক্যানভাস চিত্রগুলি ঠেলাঠেলি না করে বা জটিলতা, কর্মক্ষেত্র এবং নিজেই "অ-প্রতিক্রিয়াশীল" ক্যানভাস ব্যবহার না করে স্ট্যাকটি সিদ্ধ করতে উজ্জ্বলতার সাথে কাজ করেছিল। আমরা ভ্যানিলা ক্যানভাস + জেএস সহ এই সাবলীলভাবে / বুদ্ধিমান করতে পারিনি।

z-indexআপেক্ষিক অবস্থানযুক্ত মোড়কের মধ্যে স্তরযুক্ত সামগ্রী তৈরি করতে প্রথমে পরম ডিভগুলিতে ব্যবহার করুন। তারপরে একটি রেন্ডার করা ক্যানভাস পেতে এইচটিএমএল 2 ক্যানভাসের মাধ্যমে মোড়কটি টিপুন, যা আপনি যেমন হিসাবে রেখে যেতে পারেন বা কোনও চিত্র হিসাবে আউটপুট রাখতে পারেন যাতে কোনও ক্লায়েন্ট এটি সংরক্ষণ করতে পারে।

Comments

আপনার যদি ভারী চিত্র থাকে তবে এইচটিএমএলকে ক্যানভাসে রূপান্তর করতে কিছুটা সময় লাগবে, রেন্ডারিংটি দীর্ঘ সময় নিয়েছিল বলেই আমাদের এ থেকে দূরে সরে যেতে হয়েছিল।

— ভিলিয়াস

@ উইলিয়াস হ্যাঁ ভারী / বৃহত চিত্রগুলিতে ভাল কল। আমরা ৪০০ টিরও বেশি স্তরবিহীন 300 কে বা তার চেয়ে কম চিত্রগুলিকে আটকে রাখার চেষ্টা করেছি, অন্যথায় সংস্থান সংস্থাগুলি চূড়ান্ত সুরক্ষিত চিত্র ডাউনলোড করার সময় পোড়া বোধ করবে। কৌতূহলী, আপনি এই হ্রাস সময়ে কি সরানো?

— ধাউপিন

ভাল, আমরা প্রথম স্থানে কিছু আঁকতে এইচটিএমএল উপাদান ব্যবহার করে একটি বড় ভুল করেছি। যেহেতু আমাদের এপিআই x, y, প্রস্থ এবং উচ্চতা ফিরে এসেছে, আমরা এইচটিএমএল উপাদানগুলির পরিবর্তে চিত্র আঁকতে jscanavs এ চলে এসেছি। আপনার মনে হ'ল আমাদের ঘূর্ণন সংক্রান্ত কয়েকটি সমস্যা ছিল (প্রারম্ভিক পয়েন্টগুলি কিছুটা বিশ্রী এবং অপ্রত্যাশিত ছিল) এবং নির্দিষ্ট মাত্রাগুলি ব্যবহার করে এতে চিত্র প্রয়োগ করে তবে সব শেষ পর্যন্ত সমাধান হয়ে গেছে। আমরা এটিও দেখতে পেলাম যে আমাদের চিত্র প্রক্রিয়াকরণ অ্যাপ্লিকেশনটি প্রচুর সংস্থান সঞ্চার করছে, তাই আমরা এটি থেকেও সরে এসেছি।

— ভিলিয়াস

Answer 7

তবে স্তর 02, সমস্ত স্তরগুলিকে স্তর 01 এ কভার করবে I আমি এটি উভয় স্তরে অঙ্কন দেখানোর জন্য ব্যবহার করেছি। শৈলীতে (ব্যাকগ্রাউন্ড-রঙ: স্বচ্ছ;) ব্যবহার করুন।

    <div style="position: relative;"> 
      <canvas id="lay01" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 0; background-color: transparent;">
      </canvas> 
      <canvas id="lay02" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 1; background-color: transparent;">
      </canvas>
</div>