[कैनवास ग्राफिक संपादक] स्केच ब्रश

हम हब पर कैनवास का सप्ताह जारी रखते हैं
इंटरनेट पर फ्लैश / सिल्वरविले ग्राफिक संपादक असामान्य नहीं हैं। कैनवास पर, उनमें से बहुत कम हैं, लेकिन काफी दिलचस्प भी हैं। यहाँ कुछ उदाहरण हैं:

• mrdoob.com/projects/harmony
• muro.deviantart.com

लेखों की इस श्रृंखला में, मैं विभिन्न बिंदुओं के बारे में बात करने की योजना बना रहा हूं जो कि कैनवास पर एक आलेखीय संपादक बनाते समय आपका सामना कर सकते हैं। मैं तुच्छ भागों पर स्पर्श नहीं करूंगा, मैं केवल सबसे दिलचस्प वर्णन करने का प्रयास करूंगा। इस लेख में मैं रेखाचित्रों के लिए ब्रश बनाने के लिए एक अनुमानित एल्गोरिथ्म का वर्णन करूंगा

तो हम कहां से शुरू करें? आइए अंदर कैनवास के साथ एक सरल फ़ाइल बनाकर शुरू करें। मैं अनावश्यक फ्रेमवर्क और अन्य चीजों के बिना यथासंभव कॉम्पैक्ट लिखने की कोशिश करूंगा, ताकि एल्गोरिथ्म स्वयं जितना संभव हो उतना पारदर्शी हो। यहाँ एक साफ फ़ाइल है जिसमें हम स्केच के लिए एक ब्रश बनाएंगे:

<! DOCTYPE html >
< html >
< head >
< title ></ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
body {
margin: 0;
}
#cnvs {
border: #000000 1px solid;
}
</ style >
</ head >
< body >
< canvas id ="cnvs" width ="800" height ="500" ></ canvas >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

कैनवास जानबूझकर ऊपरी बाएं कोने में स्थित है ताकि स्क्रीन पर कर्सर के निर्देशांक कैनवास पर पिक्सेल के निर्देशांक के साथ मेल खाते हैं (सीमा की 1 पिक्सेल की त्रुटि कोड की शुद्धता के लिए उपेक्षित है, लेकिन हम इसके बारे में जानते हैं और याद करते हैं)।
ड्राइंग मैकेनिज्म बनाने के लिए, हमें मानक माउस ईवेंट्स के लिए (ऑनमाउसडाउन, ऑनमाउसअप, ऑनमाउसोव) के लिए कई हैंडलर की आवश्यकता होती है। प्रत्येक के लिए एक फंक्शन बनाएं।

function mDown(e){
};
function mUp(e){
};
function mMove(e){
};

* This source code was highlighted with Source Code Highlighter .

हमें कई चर भी चाहिए: कार्रवाई में हम बाईं माउस बटन (दबाया या नहीं) की वर्तमान स्थिति को स्टोर करेंगे, ctx में - कैनवास पर ड्राइंग के लिए 2d संदर्भ, बिंदुओं में - अंक के लिए एक सरणी, सूचक में - इस सरणी के तत्वों में से एक के लिए एक सूचक ।
तो एल्गोरिथ्म क्या है? यह देखने के बाद कि मेरा मित्र रेखाचित्र कैसे बनाता है, मैंने लगभग भविष्य के ब्रश के तंत्र की कल्पना की। इस तरह के ब्रश बनाने के लिए आपको जिन मुख्य बिंदुओं पर विचार करने की आवश्यकता है: स्केच स्ट्रोक के साथ खींचे जाते हैं, ब्रश कमजोर होना चाहिए (मेरा दोस्त पेंसिल पर धीरे से दबाया जाता है, लेकिन एक जगह कई बार खींचा जाता है, इसलिए लाइन विभिन्न पूंछों के आगे पीछे की ओर निकल जाती है), बेंड्स पर लाइन चौड़ी हो जाती है ।
एल्गोरिथ्म का मेरा संस्करण इस प्रकार है:

• माउस के बाद हम एक सामान्य रेखा खींचते हैं, जैसे कि वह एक पेंसिल हो
• इसके अलावा, हम वर्तमान बिंदु को कुछ लंबे खींचे गए के साथ जोड़ते हैं (यह झुकता को मोटाई देगा)
• यह सब यादृच्छिकता (प्यारे) के एक छोटे तत्व के साथ होना चाहिए
• ब्रश आंशिक रूप से पारदर्शी (कम तीव्रता) होगा

स्पष्टता के लिए पहला और दूसरा पैराग्राफ चित्र में दिखाया गया है:

तो, अंक सरणी में हम पिछले 10 बिंदुओं के निर्देशांक संग्रहीत करते हैं (मैंने 10 नंबर चुना, आप इस के साथ प्रयोग कर सकते हैं)। हम पारदर्शिता का उपयोग करते हुए तीव्रता को कम करते हैं (इसे 0.1 पर सेट करें - इसका मतलब है कि हमारा ब्रश 90% पारदर्शी होगा)। यहाँ चर घोषित करने और कैनवास तक पहुँचने के लिए कोड है:

var action = "up" ;
var ctx,points,pointer;
function initcnvs(){
ctx = document .getElementById( 'cnvs' ).getContext( '2d' );
ctx.globalAlpha = 0.1;
points = new Array(10);
};

* This source code was highlighted with Source Code Highlighter .

हम शरीर के भार को initcnvs () फ़ंक्शन कहते हैं। प्रासंगिक घटनाओं के लिए अन्य कार्य:

< body onload ="initcnvs()" onmousedown ="mDown(event)" onmousemove ="mMove(event)" onmouseup ="mUp(event)" >

* This source code was highlighted with Source Code Highlighter .

अंत में, एल्गोरिथ्म ही। जब आप बटन पर क्लिक करते हैं, तो हम एक्शन को नीचे बदलते हैं, हमारे एरे में पहला पॉइंट फेंकते हैं और पॉइंटर को उसमें सेट करते हैं।

function mDown(e){
action = "down" ;
points[0] = [e.pageX, e.pageY];
pointer = 0;
};

* This source code was highlighted with Source Code Highlighter .

जब आप बटन जारी करते हैं, तो हम सरणी को साफ़ करते हैं और कार्रवाई को ऊपर तक बदलते हैं।

function mUp(e){
points = new Array(10);
action = "up" ;
};

* This source code was highlighted with Source Code Highlighter .

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

function mMove(e){
if (action == "down" ) {
var nextpoint = pointer + 1;
if (nextpoint > 9) nextpoint = 0;
ctx.beginPath();
ctx.moveTo(points[pointer][0],points[pointer][1]);
ctx.lineTo(e.pageX, e.pageY);
if (points[nextpoint]) {
ctx.moveTo(points[nextpoint][0] + Math.round(Math.random()*10-5),points[nextpoint][1] + Math.round(Math.random()*10-5));
ctx.lineTo(e.pageX, e.pageY);
}
ctx.stroke();
pointer = nextpoint;
points[pointer] = [e.pageX, e.pageY];
}
};

* This source code was highlighted with Source Code Highlighter .

यहाँ इस ब्रश गति में कैसा दिखता है:

आप मापदंडों, यादृच्छिकता, तीव्रता के साथ प्रयोग कर सकते हैं और परिणामों को देख सकते हैं। यहाँ पूरे उदाहरण का स्रोत कोड है, यह काफी कॉम्पैक्ट रूप से सामने आया:

<! DOCTYPE html >
< html >
< head >
< title ></ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
body {
margin: 0;
}
#cnvs {
border: #000000 1px solid;
}
</ style >
< script type ="text/javascript" >
var action = "up" ;
var ctx,points,pointer;
function initcnvs(){
ctx = document .getElementById( 'cnvs' ).getContext( '2d' );
ctx.globalAlpha = 0.1;
points = new Array(10);
};
function mDown(e){
action = "down" ;
points[0] = [e.pageX, e.pageY];
pointer = 0;
};
function mUp(e){
points = new Array(10);
action = "up" ;
};
function mMove(e){
if (action == "down" ) {
var nextpoint = pointer + 1;
if (nextpoint > 9) nextpoint = 0;
ctx.beginPath();
ctx.moveTo(points[pointer][0],points[pointer][1]);
ctx.lineTo(e.pageX, e.pageY);
if (points[nextpoint]) {
ctx.moveTo(points[nextpoint][0] + Math.round(Math.random()*10-5),points[nextpoint][1] + Math.round(Math.random()*10-5));
ctx.lineTo(e.pageX, e.pageY);
}
ctx.stroke();
pointer = nextpoint;
points[pointer] = [e.pageX, e.pageY];
}
};
</ script >
</ head >
< body onload ="initcnvs()" onmousedown ="mDown(event)" onmousemove ="mMove(event)" onmouseup ="mUp(event)" >
< canvas id ="cnvs" width ="800" height ="500" ></ canvas >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

यह सब, मुझे आशा है कि लेख आपके लिए उपयोगी रहा है। भविष्य में मैं स्मार्ट हैचिंग के बारे में बात करने की योजना बना रहा हूं, कैनवास के लिए "रद्द" बटन, धुंधली ब्रश के साथ एक चाल और बहुत कुछ। इसके अलावा, यदि आप विषय पर किसी चीज़ में रुचि रखते हैं - टिप्पणियों में लिखें, मैं आपको इसके बारे में भी बताऊंगा। पाठ में त्रुटियां - निजी तौर पर, अग्रिम धन्यवाद।

PS इस ब्रश के साथ मेरा पागल कौशल: