css - এসড - সিএসএস পজিশন




সিএসএস রূপান্তর, ক্রোম মধ্যে jagged প্রান্ত (8)

আমি আমার ওয়েবসাইটে সীমানা সহ চিত্র এবং টেক্সটবক্সগুলি ঘোরাতে CSS3 রূপান্তর ব্যবহার করছি।

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

ঘূর্ণিত ছবি এবং পাঠ্য নিজেকে সূক্ষ্ম দেখায়, এটি শুধুমাত্র সীমানা যা জাগেজ দেখায়।

আমি ব্যবহার করি সিএসএস এই হল:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

আমি কি এটিকে ঠিক করতে পারি, যেমন ক্রোমকে AA ব্যবহার করতে বাধ্য করে?

নিচের উদাহরণঃ


Chrome এর ক্যানভাসের জন্য (সংস্করণ 52)

সমস্ত তালিকাভুক্ত তালিকা ছবি সম্পর্কে। কিন্তু আমার সমস্যা ক্রোম রূপান্তর সঙ্গে ক্রোম (v.52) ক্যানভাস সম্পর্কে। তারা jagged হয়ে ওঠে এবং এই সব পদ্ধতি সাহায্য করতে পারে না।

সমাধান যে আমার জন্য কাজ করে:

  1. প্রতিটি পাশের জন্য 1 পিএক্সে ক্যানভাস বড় করুন => +2 পিএক্স প্রস্থ এবং উচ্চতার জন্য;
  2. অফসেট + 1 পিএক্স (0,0 এর পরিবর্তে 1,1 পদে) এবং নির্দিষ্ট আকার (ছবির আকারের আকার ক্যানভাসের আকারের চেয়ে 2px কম হওয়া উচিত)
  3. প্রয়োজনীয় ঘূর্ণন প্রয়োগ করুন

তাই গুরুত্বপূর্ণ কোড ব্লক:

// Unfixed version
ctx.drawImage(img, 0, 0, 335, 218);
// Fixed version
ctx.drawImage(img, 1, 1, 335, 218);
/* This style should be applied for fixed version */
canvas {
  margin-left: -1px;
  margin-top:-1px;
}        
<!--Unfixed version-->
<canvas width="335" height="218"></canvas>
<!--Fixed version-->
<canvas width="337" height="220"></canvas>

নমুনা: https://jsfiddle.net/tLbxgusx/1/

নোট: অনেকগুলি নেস্টেড ডিভ রয়েছে কারণ এটি আমার প্রকল্পের থেকে সরলীকৃত সংস্করণ।

এই সমস্যাটি আমার জন্য ফায়ারফক্সের জন্য পুনরুত্পাদন করা হয়। সাফারি ও এফএফ এ রেটিনা নিয়ে এ রকম কোনো সমস্যা নেই।

এবং অন্য প্রতিষ্ঠিত সমাধান ক্যানভাসকে একই আকারের ডিভভে রাখতে এবং এই ডিভিতে নিম্নলিখিত CSS প্রয়োগ করতে হবে:

overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;

এবং ঘূর্ণন এই মোড়ানো div প্রয়োগ করা উচিত। তাই তালিকাভুক্ত সমাধান কাজ কিন্তু ছোট সংশোধন সঙ্গে।

এবং যেমন সমাধান জন্য সংশোধিত উদাহরণ: https://jsfiddle.net/tLbxgusx/2/

দ্রষ্টব্য: ক্লাস 'তৃতীয়' দিয়ে ডিভি স্টাইল দেখুন।


3 ডি রূপান্তর চেষ্টা করুন। এটি একটি যাদুমন্ত্র মত কাজ করে!

/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateZ(2deg);

আপনি ব্লুর্ড box-shadows শেড ব্যবহার করে জ্যাজিংটি মাস্ক করতে সক্ষম হতে পারেন। বাক্স-ছায়া পরিবর্তে -webkit-box-shadow ব্যবহার করে এটি অ-ওয়েবকিট ব্রাউজারগুলিকে প্রভাবিত করে না তা নিশ্চিত করবে। আপনি যদিও Safari এবং মোবাইল ওয়েবকিট ব্রাউজার চেক করতে চান।

ফলাফল কিছুটা ভাল, তবে অন্যান্য ব্রাউজারগুলির সাথে এখনও অনেক কম ভাল:


আমার জন্য এটা দৃষ্টিকোণ সিএসএস সম্পত্তি ছিল যে কৌশল:

-webkit-perspective: 1000;

আমি কোন 3 ডি রূপান্তর ব্যবহার হিসাবে আমার ক্ষেত্রে সম্পূর্ণ অযৌক্তিক, কিন্তু তবুও কাজ করে।


একটি 1px স্বচ্ছ সীমানা যোগ করা এন্টি-অ্যালাইজিং ট্রিগার করবে

outline: 1px solid transparent;

বিকল্পভাবে, একটি 1px স্বচ্ছ বক্স-ছায়া যোগ করুন।

box-shadow: 0 0 1px rgba(255,255,255,0);

নির্বাচিত উত্তর (বা অন্য কোনও উত্তর) আমার জন্য কাজ করে নি, কিন্তু এটি করেছে:

img {outline:1px solid transparent;}


যদি কেউ এটি পরে অনুসন্ধান করে তবে ক্রোমে সিএসএস রূপান্তরের উপর -webkit-backface-visibility প্রান্ত থেকে পরিত্রাণ পেতে একটি চমৎকার কৌশল হল CSS সম্পত্তি -webkit-backface-visibility hidden একটি মান যুক্ত করা। আমার নিজের পরীক্ষায়, এটি সম্পূর্ণরূপে তাদের নির্মূল করেছে। আশা করি এইটি কাজ করবে.

-webkit-backface-visibility: hidden;

শুধু চিন্তা করেছিলাম যে আমরা আমাদের সমাধানটিও নিক্ষেপ করবো কারণ Chrome / Windows এ আমাদের একই সমস্যা ছিল।

আমরা উপরে @stevenWatkins দ্বারা সমাধান চেষ্টা, কিন্তু এখনও "ধাপ্পাবাজি" ছিল।

পরিবর্তে

-webkit-backface-visibility: hidden;

আমরা ব্যবহার করেছি:

-webkit-backface-visibility: initial;

আমাদের জন্য এই কৌশল ছিল 🎉





antialiasing