KineticJS स्ट्रोक 1 की चौड़ाई एक तेज 1 पिक्सेल लाइन

Question

की बजाय धुंधली, अर्द्ध-अपारदर्शी रेखा का कारण बनती है मैंने इंटरनेट के चारों ओर देखा है और कुछ भी नहीं मिला है, मैंने अन्य KineticJS उदाहरणों को देखा है जो उनके आयत पर 1 की स्ट्रोकविड्थ का उपयोग करते हैं और वे सभी एक तेज तेज 1px अपारदर्शी काला रेखा के बजाय अर्ध-अपारदर्शी 2 पिक्सेल लाइन दिखाई देते हैं।

अब, मुझे लगता है कि Google के पास कुछ भी नहीं है कि समाधान या तो वास्तव में सरल या असंभव है, लेकिन .. क्या आप जानते हैं कि मैं KineticJS का उपयोग करके एक पीएक्स सीमा कैसे प्राप्त कर सकता हूं?

$(window).load(function(){ 
    var stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400}); 
    var layer = new Kinetic.Layer(); 

    var rect = new Kinetic.Rect({ 
     x: stage.attrs.width/2, y: stage.attrs.height/2, 
     width: 100, height: 100, 
     fill: "#eee", stroke: "black", strokeWidth: 1 
    }); 

    layer.add(rect); 
    stage.add(layer); 
}); 

किसी को भी किसी भी विचार है?

Answer 1

जब आप (x, y1) से (x, y2) (कहें; क्षैतिज रेखाओं के लिए भी सही है) से कोई रेखा खींचती है तो आपको चिंता करने की आवश्यकता है कि x "पिक्सेल के बीच में" है या नहीं। यदि रेखा "पिक्सेल के बीच" है तो यह आधे में आधे में आधा होगा। नतीजा धुंधला लगेगा (यह मूल रूप से एंटी-एलाइजिंग है)।

ग्राफिक्स सिस्टम कोनों या केंद्रों के लिए निर्देशांक हैं या नहीं, लेकिन आप थोड़ा प्रयोग करके इस मुद्दे को ठीक कर सकते हैं - आपको केवल आधा पिक्सेल चौड़ाई को समन्वय में जोड़ने की आवश्यकता है और पुनः प्रयास करें।

एचटीएमएल 5 कैनवास (0,0) के मामले में शीर्ष बाएं कोने है, इसलिए यदि आपके पास कोई ट्रांसफॉर्म नहीं है तो मुझे लगता है कि शीर्ष बाएं पिक्सेल केंद्र (0.5, 0.5) है।

Answer 2

वही चीज़ प्राप्त करने के लिए एक अच्छा तरीका है जो आप चाहते हैं: समूह दो समान आकार। निचले स्तर पर एक शीर्ष पर एक पिक्सेल बड़ा होता है। नीचे एक को उस रंग से भरें जिसे आप अपनी सीमा चाहते हैं (आपके मामले में: काला)। मेरे लिए ठीक काम करता है और सीएसएस की सटीकता और गुणवत्ता

Answer 3

एक और दृष्टिकोण: यदि आप इंटीजर संख्याओं को निर्देशांक और ऑर्टोगोनल 1 पीएक्स वजन रेखाओं के रूप में उपयोग करते हैं, तो आप पूरे चरण को [0.5, 0.5] तक ले जा सकते हैं और आपको नहीं करना है प्रत्येक समन्वय में पिक्सेल का आधा जोड़ें, फिर आप इंटीजर संख्याओं को समन्वय के रूप में उपयोग कर सकते हैं क्योंकि आपका पूरा चरण पिक्सेल के आधे हिस्से को दाएं और नीचे तक ले जाया जाएगा।

Answer 4

काइनेटिक के साथ इसे हल करने का सबसे आसान तरीका ऑफ़सेट गुणों का उपयोग करना है। तो, बल्कि आप क्या ड्राइंग कर रहे हैं के व्यक्तिगत निर्देशांक स्थानांतरण से, अपने पूरे लाइन/आकार/समूह/परत/मंच है कि द्वारा ऑफसेट है बहुत, सैद्धांतिक रूप से यह हो रही है जहां आप इसे कम से कम उपद्रव के साथ हैं:

var rect = new Kinetic.Rect({ 
    x: stage.attrs.width/2, y: stage.attrs.height/2, 
    width: 100, height: 100, 
    fill: "#eee", stroke: "black", strokeWidth: 1, 
    offsetX: 0.5, 
    offsetY: 0.5 
}); 

या , एक बार में सामानों का पूरा गुच्छा प्राप्त करने के लिए:

var layer = new Kinetic.Layer({ 
    offsetX: 0.5, 
    offsetY: 0.5 
}); 

यह कहा गया कि सभी आइटम इस चाल से लाभ नहीं उठाते हैं। कुछ, वास्तव में, अस्पष्ट हो जाते हैं। तो, सबसे परमाणु स्तर पर ऑफसेट को लागू करना सुनिश्चित करें जो इससे दूषित आकारों से बचाता है।