چند وقت پیش من این دموی جالب رو در سایت codepen دیدم و به این فکر افتادم چقدر خوب میشد بصورت کدنویسی بشه در وب نقاشی کرد. کتابخانه جاوا اسکریپتی بنام brushstroke این کار رو انجام میده . بوسیله اون میتونیم از رنگ ها , تصاویر و حتی کدهای Html داخل نقاشی مون استفاده کنیم.
در این مقاله ما یاد میگیریم چطور یک پوستر شبیه این درست کنیم :
شروع کار
استفاده از این کتابخانه بسیار سادست کافیه اون رو از این لینک دانلود کنید و به صورت زیر به فایل Html اضافه کنید :
<!-- Optional dependencies goes here -->
<script src="dist/brushstroke.min.js"></script>
<script>
// Options for customization
var options = {
duration: 1,
queue: true
};
// Initialization
var bs = new Brushstroke(options);
// Draw, erase, etc...
bs.draw();
bs.erase();
bs.draw();
</script>
طراحی تصویر بک گراند
همینطور که مشاهده کردید پوستر ما شامل یک متن و یک تصویر بک گراند میشه. حالا میخوایم ببینیم چطور این بک گراند بصورت نقاشی درمیاد !
ما باید برای تصویر یک نمونه جدید از Brushstroke به همراه تمام ویژگی های لازم ایجاد کنیم, پس کدهای جاوا اسکریپتمون رو شروع می کنیم :
// Declaring variables
var width = window.innerWidth || document.body.clientWidth;
var height = window.innerHeight || document.body.clientHeight;
var optionsBackground, bsBackground;
// Random curves for background
optionsBackground = {
animation: 'points',
points: 10,
inkAmount: 5,
size: 300,
frames: 10,
frameAnimation: true,
splashing: false,
image: 'images/background.jpg',
centered: true,
queue: true,
width: width,
height: height
};
bsBackground = new Brushstroke(optionsBackground);
حالا ما میتونیم نقاشی مون رو شروع کنیم و بصورت زیر به افکتی میخوایم برسیم :
// Function to start the animation
function runAnimation() {
// Draw a straight line
bsBackground.draw({
points: [0, height / 2 - 40, width, height / 3]
});
// Draw another straight line
bsBackground.draw({
points: [width, height / 2, 0, height / 1.5 - 40]
});
// Draw a curve generated using 20 random points
bsBackground.draw({
inkAmount: 3,
frames: 100,
size: 200,
splashing: true,
points: 20
});
}
// Start
runAnimation();
نقاشی متن
این کتابخانه میتونه تصاویر رو بصورت مسیرهای SVG نقاشی کنه. ابزارهای زیادی برای بوجود آوردن متن بصورت SVG وجود داره که ما از افزونه ی Hershey Text که در نرم افزار Inkscape vector editor وجود داره استفاده کردیم (مطالعه بیشتر)
بعد از رندرگیری با زدن کلیدهای Ctrl + L شکل متن رو زیباتر می کنیم و SVG ما به شکل زیر درمیاد:
خب حالا ما باید کد SVG رو در فایل Html وارد کنیم :
<!-- Each path is a letter in "Scotch.io" string -->
<svg width="1000" height="300" style="display: none">
<path d="m157.76 105.88c-7.4053-8.9862-16.122-15.85-27.865-17.818-16.604-3.2803-35.244-2.2435-50.148 6.2719-8.4329 6.4228-15.194 15.018-10.757 25.919 6.9636 23.286 33.81 26.063 53.267 33.499 15.84 4.0064 32.554 13.238 35.503 30.658 1.8468 11.869-0.78168 21.884-11.233 28.659-14.576 8.9259-33.167 9.5932-49.689 6.8414-12.29-2.3318-20.767-8.5079-28.636-18.075"/>
<path d="m272.9 150.66c-9.8598-11.768-23.423-22.368-39.709-19.191-13.362 0.5304-25.61 11.328-31.775 22.54-6.7138 13.934-7.1853 29.748-0.25697 43.707 5.5237 11.364 17.648 21.717 30.492 23.311 15.813 2.8302 30.126-5.4593 39.688-17.63l1.2482-1.2482 0.31262-0.31262"/>
<path d="m343.27 131.47c-15.039 5.7827-27.96 17.873-30.612 34.262-4.0296 12.888 0.41254 27.839 7.52 38.602 9.0267 11.179 22.414 19.394 37.213 16.695 13.362-0.53038 25.61-11.328 31.775-22.54 6.7139-13.934 7.1853-29.748 0.25697-43.707-5.5237-11.364-17.648-21.717-30.492-23.311h-15.661z"/>
<path d="m445.62 86.692c0.37493 36.778-0.74805 73.798 0.55819 110.42 2.5876 11.039 6.138 21.243 18.469 23.832 4.2802 0.18855 8.6454 0.0288 12.958 0.0819m-51.176-89.559h44.779"/>
<path d="m586.36 150.66c-9.8598-11.768-23.423-22.368-39.709-19.191-13.362 0.5304-25.61 11.328-31.775 22.54-6.7139 13.934-7.1853 29.748-0.25697 43.707 5.5237 11.364 17.648 21.717 30.492 23.311 15.813 2.8302 30.126-5.4593 39.688-17.63l1.2482-1.2482 0.31262-0.31262"/>
<path d="m631.14 86.692v134.34m0-63.971c12.158-12.114 24.92-29.2 44.341-25.588 10.207-0.53645 22.347 4.9455 22.978 16.444 6.3533 18.657 1.559 39.122 3.0479 58.568v14.546"/>
<path d="m752.68 189.04c-15.025 6.5899 6.2843 18.544 5.1489 5.1489l-5.1489-5.1489z"/>
<path d="m797.46 86.692c6.5899 15.025 18.544-6.2843 5.1489-5.1489l-5.1489 5.1489zm6.3971 44.779v89.559"/>
<path d="m880.62 131.47c-15.039 5.7827-27.96 17.873-30.612 34.262-4.0295 12.888 0.41253 27.839 7.52 38.602 9.0268 11.179 22.414 19.394 37.213 16.695 13.362-0.53038 25.61-11.328 31.775-22.54 6.7139-13.934 7.1853-29.748 0.25697-43.707-5.5237-11.364-17.648-21.717-30.492-23.311h-15.661z"/>
</svg>
حالا میتونیم از این مسیرها در کد جاوا اسکریپت و برای نقاشی متنمون استفاده کنیم.
// Declaring variables
var optionsPath, bsPath;
// Options for text (SVG paths)
optionsPath = {
animation: 'path',
inkAmount: 2,
frames: 20,
frameAnimation: true,
color: 'white',
width: 1000,
height: 300
};
// Initializing
bsPath = new Brushstroke(optionsPath);
// Draw each letter of the text, with a delay among them
var paths = document.querySelectorAll('path');
var delay = 0;
for (var i = 0; i < paths.length; i++) {
bsPath.draw({path: paths[i], delay: delay});
delay += 0.5;
}
افزودن عملیات اجرای دوباره
درنهایت کاری که میخوایم انجام بدیم اینه که یک امکان برای تکرار نمایش نقاشی در نظر بگیریم.
ایده اینه که یک صفحه سیاه رنگ نقاشی کنیم که شکل پاک کردن نقاشی مون بشه و دوباره انیمیشن اجرا بشه.
// Declaring variables
var button = document.querySelector('button');
var animating = true;
var optionsErase, bsErase;
// Erase and run again
optionsErase = {
queue: true,
size: 300,
padding: 0,
overlap: 100,
inkAmount: 20,
frames: 100,
frameAnimation: true,
color: '#000',
width: width,
height: height,
end: function () {
// Clear all canvas and run animation
bsBackground.clear();
bsPath.clear();
bsErase.clear();
runAnimation();
}
};
bsErase = new Brushstroke(optionsErase);
// Run again button
button.addEventListener('click', function () {
if (!animating) {
toggleButton();
bsErase.draw();
}
});
function toggleButton() {
button.classList.toggle('hidden');
animating = !animating;
}
دموی نهایی به این شکل میشه .
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید