Sayfa
/ 48
Sayfa Seç
Çift Sayfa
Kitap Seç
Ana Menü
Video
Ses
Boyama
Etkinlik
🎨 Çizim Araçları -
1
. Sayfa
Araçlar
Renkler
Şekiller
Kontroller
Temizle
Geri Al
Kaydet
Sayfa Videosu
×
Bu sayfa için video yükleniyor...
Giriş Videosu
Eğitim Videosu
Özet Videosu
Sayfa Sesi
×
Sayfa Okuması
Normal Okuma
Yavaş Okuma
Hızlı Okuma
Arka Plan Müziği
Sakin
Enerjik
Durdur
Boyama Etkinliği
×
Renk Paleti
Fırça Araçları
Fırça Boyutu:
15px
Temizle
İndir
Yazdır
Sayfa Etkinliği
×
Hafıza Oyunu
Yapboz
Eşleştirme
Mini Quiz
Yukarıdan bir etkinlik seçin!
function initializeDrawingTools() { console.log('🎨 Kitap 13 - Çizim araçları başlatılıyor...'); const canvas1 = document.getElementById('drawingCanvas'); const canvas2 = document.getElementById('drawingCanvas2'); if (canvas1) setupDrawingCanvas(canvas1, 'sayfa'); if (canvas2 && !canvas2.classList.contains('hidden')) setupDrawingCanvas(canvas2, 'sayfa2'); setupDrawingButtons(); showFeedback('🎨 Çizim araçları aktif!', 'success'); } function setupDrawingCanvas(canvas, imageId) { const img = document.getElementById(imageId); if (!img) return; const resizeCanvas = () => { const rect = img.getBoundingClientRect(); canvas.style.width = rect.width + 'px'; canvas.style.height = rect.height + 'px'; canvas.width = rect.width * 2; canvas.height = rect.height * 2; const ctx = canvas.getContext('2d'); ctx.scale(2, 2); ctx.lineCap = 'round'; ctx.lineJoin = 'round'; }; if (img.complete) resizeCanvas(); else img.onload = resizeCanvas; let isDrawing = false, lastX = 0, lastY = 0, startX = 0, startY = 0, canvasImageData = null; function startDrawing(e) { isDrawing = true; const rect = canvas.getBoundingClientRect(); lastX = (e.clientX || e.touches[0].clientX) - rect.left; lastY = (e.clientY || e.touches[0].clientY) - rect.top; startX = lastX; startY = lastY; const ctx = canvas.getContext('2d'); const currentTool = currentDrawingMode || window.currentTool || 'pen'; // Canvas durumunu kaydet (şekiller için) if (currentTool === 'line' || currentTool === 'circle' || currentTool === 'rectangle' || currentTool === 'triangle' || currentTool === 'filledcircle' || currentTool === 'arrow') { canvasImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); } if (currentTool === 'highlighter') { ctx.globalCompositeOperation = 'multiply'; ctx.globalAlpha = 0.25; ctx.strokeStyle = currentDrawingColor || '#FFD700'; ctx.lineWidth = 25; } else if (currentTool === 'circle') { ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1.0; ctx.strokeStyle = currentDrawingColor; ctx.lineWidth = 2; } else if (currentTool === 'filledcircle') { // Dolu Daire için başlangıç ayarları ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1.0; ctx.fillStyle = currentDrawingColor; ctx.lineWidth = 2; } else if (currentTool === 'rectangle') { // Dikdörtgen: önceki durumu geri yükle ve yeni dikdörtgeni çiz if (canvasImageData) { ctx.putImageData(canvasImageData, 0, 0); } ctx.beginPath(); ctx.rect(startX, startY, currentX - startX, currentY - startY); ctx.stroke(); } else if (currentTool === 'triangle') { // Üçgen: önceki durumu geri yükle ve yeni üçgeni çiz if (canvasImageData) { ctx.putImageData(canvasImageData, 0, 0); } ctx.beginPath(); ctx.moveTo(startX + (currentX - startX) / 2, startY); ctx.lineTo(startX, currentY); ctx.lineTo(currentX, currentY); ctx.closePath(); ctx.stroke(); } else if (currentTool === 'arrow') { // Ok: önceki durumu geri yükle ve yeni oku çiz if (canvasImageData) { ctx.putImageData(canvasImageData, 0, 0); } const headlen = 15; const angle = Math.atan2(currentY - startY, currentX - startX); ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(currentX, currentY); ctx.lineTo(currentX - headlen * Math.cos(angle - Math.PI / 6), currentY - headlen * Math.sin(angle - Math.PI / 6)); ctx.moveTo(currentX, currentY); ctx.lineTo(currentX - headlen * Math.cos(angle + Math.PI / 6), currentY - headlen * Math.sin(angle + Math.PI / 6)); ctx.stroke(); } else { // Sürekli çizim (pen, brush, highlighter, eraser) ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(currentX, currentY); ctx.stroke(); lastX = currentX; lastY = currentY; } } function draw(e) { if (!isDrawing) return; const rect = canvas.getBoundingClientRect(); const currentX = (e.clientX || e.touches[0].clientX) - rect.left; const currentY = (e.clientY || e.touches[0].clientY) - rect.top; const ctx = canvas.getContext('2d'); const currentTool = currentDrawingMode || window.currentTool || 'pen'; if (currentTool === 'line') { // Çizgi: önceki durumu geri yükle ve yeni çizgiyi çiz if (canvasImageData) { ctx.putImageData(canvasImageData, 0, 0); } ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(currentX, currentY); ctx.stroke(); } else if (currentTool === 'circle') { // Daire: önceki durumu geri yükle ve yeni daireyi çiz if (canvasImageData) { ctx.putImageData(canvasImageData, 0, 0); } const radius = Math.sqrt(Math.pow(currentX - startX, 2) + Math.pow(currentY - startY, 2)); ctx.beginPath(); ctx.arc(startX, startY, radius, 0, 2 * Math.PI); ctx.stroke(); } else if (currentTool === 'filledcircle') { // Dolu Daire: önceki durumu geri yükle ve yeni daireyi DOLU olarak çiz if (canvasImageData) { ctx.putImageData(canvasImageData, 0, 0); } const radius = Math.sqrt(Math.pow(currentX - startX, 2) + Math.pow(currentY - startY, 2)); ctx.fillStyle = currentDrawingColor; ctx.beginPath(); ctx.arc(startX, startY, radius, 0, 2 * Math.PI); ctx.fill(); } else if (currentTool === 'rectangle') { // Dikdörtgen: önceki durumu geri yükle ve yeni dikdörtgeni çiz if (canvasImageData) { ctx.putImageData(canvasImageData, 0, 0); } ctx.beginPath(); ctx.rect(startX, startY, currentX - startX, currentY - startY); ctx.stroke(); } else if (currentTool === 'triangle') { // Üçgen: önceki durumu geri yükle ve yeni üçgeni çiz if (canvasImageData) { ctx.putImageData(canvasImageData, 0, 0); } ctx.beginPath(); ctx.moveTo(startX + (currentX - startX) / 2, startY); ctx.lineTo(startX, currentY); ctx.lineTo(currentX, currentY); ctx.closePath(); ctx.stroke(); } else if (currentTool === 'arrow') { // Ok: önceki durumu geri yükle ve yeni oku çiz if (canvasImageData) { ctx.putImageData(canvasImageData, 0, 0); } const headlen = 15; const angle = Math.atan2(currentY - startY, currentX - startX); ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(currentX, currentY); ctx.lineTo(currentX - headlen * Math.cos(angle - Math.PI / 6), currentY - headlen * Math.sin(angle - Math.PI / 6)); ctx.moveTo(currentX, currentY); ctx.lineTo(currentX - headlen * Math.cos(angle + Math.PI / 6), currentY - headlen * Math.sin(angle + Math.PI / 6)); ctx.stroke(); } else { // Sürekli çizim (pen, brush, highlighter, eraser) ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(currentX, currentY); ctx.stroke(); lastX = currentX; lastY = currentY; } } function stopDrawing() { if (isDrawing) { isDrawing = false; // Global ayarları sıfırla const ctx = canvas.getContext('2d'); ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1.0; window.lastActiveCanvas = canvas.id; saveCanvasState(canvas.id); canvasImageData = null; } } canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mouseout', stopDrawing); canvas.addEventListener('touchstart', (e) => { e.preventDefault(); startDrawing(e); }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); draw(e); }); canvas.addEventListener('touchend', (e) => { e.preventDefault(); stopDrawing(); }); canvas.style.display = 'block'; canvas.style.pointerEvents = 'auto'; } function setupDrawingButtons() { document.querySelectorAll('.drawing-tool-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.drawing-tool-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); currentDrawingMode = btn.dataset.tool; window.currentTool = btn.dataset.tool; // Fosforlu kalem seçildiğinde sarı renk öner if (btn.dataset.tool === 'highlighter') { let yellowBtn = document.querySelector('.color-btn[data-color="#FFFF00"]'); if (!yellowBtn) { yellowBtn = document.querySelector('.color-btn[data-color="#FFD700"]'); } if (yellowBtn && !yellowBtn.classList.contains('active')) { document.querySelectorAll('.color-btn').forEach(colorBtn => colorBtn.classList.remove('active')); yellowBtn.classList.add('active'); const checkIcon = yellowBtn.querySelector('.fa-check'); if (checkIcon) checkIcon.style.display = 'block'; currentDrawingColor = yellowBtn.dataset.color; window.currentColor = yellowBtn.dataset.color; showFeedback('🖍️ Fosforlu kalem seçildi! En uygun renk otomatik seçildi.', 'info'); } else { showFeedback('🖍️ Fosforlu kalem seçildi!', 'info'); } } else { const toolNames = { 'pen': 'Kalem', 'brush': 'Fırça', 'eraser': 'Silgi', 'line': 'Çizgi', 'circle': 'Daire', 'highlighter': 'Fosforlu Kalem' }; showFeedback(`🔧 ${toolNames[btn.dataset.tool] || btn.dataset.tool} seçildi`, 'info'); } }); }); // Şekil butonları için event listener ekle document.querySelectorAll('.shape-tool-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.shape-tool-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); currentDrawingMode = btn.dataset.shape; window.currentTool = btn.dataset.shape; const shapeNames = { 'arrow': 'Ok', 'circle': 'Daire', 'rectangle': 'Dikdörtgen', 'triangle': 'Üçgen', 'filledcircle': 'Dolu Daire' }; showFeedback(`🔺 ${shapeNames[btn.dataset.shape] || btn.dataset.shape} seçildi`, 'info'); }); }); document.querySelectorAll('.color-btn').forEach(btn => { btn.addEventListener('click', function() { // Ortak fonksiyonu kullan if (window.handleColorSelection) { window.handleColorSelection(this); } else { // Fallback document.querySelectorAll('.color-btn').forEach(b => b.classList.remove('active')); this.classList.add('active'); document.querySelectorAll('.color-btn .fa-check').forEach(icon => icon.style.display = 'none'); const checkIcon = this.querySelector('.fa-check'); if (checkIcon) checkIcon.style.display = 'block'; } currentDrawingColor = this.dataset.color; window.currentColor = this.dataset.color; showFeedback(`🎨 ${this.title} seçildi`, 'info'); }); }); document.querySelector('.clear-btn')?.addEventListener('click', () => { document.querySelectorAll('.drawing-canvas').forEach(canvas => { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); }); showFeedback('🗑️ Çizimler temizlendi', 'success'); }); document.querySelector('.save-btn')?.addEventListener('click', () => { const canvas = document.getElementById('drawingCanvas'); if (!canvas) return; const link = document.createElement('a'); link.download = `kitap13_sayfa${window.dimli}_${new Date().getTime()}.png`; link.href = canvas.toDataURL(); link.click(); showFeedback('💾 Çizim kaydedildi', 'success'); }); // Renk butonlarını başlat (ortak fonksiyon kullan) if (window.initializeColorButtons) { window.initializeColorButtons(); } else { // Fallback: Başlangıçta tüm renkleri inactive yap, sadece kırmızıyı active yap document.querySelectorAll('.color-btn').forEach(btn => btn.classList.remove('active')); const firstColor = document.querySelector('.color-btn[data-color="#FF0000"]'); if (firstColor) { firstColor.classList.add('active'); currentDrawingColor = '#FF0000'; window.currentColor = '#FF0000'; } } } function saveDrawingState(canvas) { const dataURL = canvas.toDataURL(); drawingHistory.push(dataURL); if (drawingHistory.length > 10) drawingHistory.shift(); } setTimeout(() => initializeDrawingTools(), 1500);
Kitap Seçimi
×
Sayfa Seç
Çift Sayfa
Kitap Seç
Ana Menü
