Appinventor İle Paint Tarzı Uygulama Yapmak

PaintPot: (Bölüm 1)

Bu öğretici basit iki boyutlu grafikleri oluşturmak için Tuval bileşeni tanıttı. Sen farklı renklerde telefon ekranında çizim yapmanızı sağlayan bir uygulama inşa edeceğiz.

Tarihsel not: PaintPot kadar geri 1970'lerde olarak, kişisel bilgisayarların potansiyelini göstermek için geliştirilen ilk programlardan biri oldu.

Kazanımlar

  PaintPot uygulaması ile:

• Bu renk çizmek için sanal bir boya pota parmağınızı batırın.
• Bir çizgi çizmek için ekran boyunca parmağınızı sürükleyin.
• Noktalar yapmak için ekrana Poke.
• Temiz ekranı silmek için alt düğmesini kullanın.
• Bir çizim arka plan olarak bir görüntü bulunur.

  Aşağıdaki App Inventor kavramları tanıtır:

• Çizim için Canvas bileşeni.
• Aranjman bileşenleri ile ekran düzeni kontrolü.
• Argüman almaz olay işleyicileri.
• Değişkenler

Başlamadan önce

Bilgisayarınız ve telefonunuz App Inventor kullanın ve en App Inventor Web sitesine göz atmak için kurulmuş olduğundan emin olun http://appinventor.mit.edu . Tasarımcısı penceresinde yeni bir proje başlatmak ve PaintPot olarak adlandırın. , Bloklar Düzenleyicisi'ni açmak Telefon bağlan 'ı tıklatın ve telefon App Inventor uygulaması başladı emin olun.

Ekran başlığı

Başlamak için, Properties gitmek
Tasarımcısı sağda paneli ve PaintPot için ekran Başlık değiştirin. Sen başlık çubuğunda gösteren yeni başlığı ile, telefonu bu değişimi görmek gerekir.

Orada App Inventor üç isim vardır ve onları şaşırtmak kolay:

1. Eğer bunun üzerinde çalışmak gibi sizin projeniz için seçtiğiniz isim. Eğer telefona üzere paketlemek Bu da uygulamanın adı olacaktır.
2. Eğer uygulamanın bileşenlerini listeler panelinde göreceksiniz ismi "Screen1",. Sen App Inventor geçerli sürümünde bu adı değiştiremezsiniz.
3. Eğer telefonun başlık çubuğunda göreceksiniz ne ekranı, Başlık. Bu HelloPurr kullanılan budur "Screen1" olmak başlar. Eğer Paintpot için yapıyoruz gibi Ama sen bunu değiştirebilirsiniz.

Bileşenleri kurmak

Sen PaintPot yapmak için bu bileşenleri kullanacağız:

• Üç kırmızı, mavi veya yeşil boya seçmek için düğmeye s ve çizim silmek için başka bir düğme.
• Bir tuval, çizim yüzeyi. Bu tuval HelloPurr öğretici pisi bir Backgroundımage vardır. Ayrıca boş bir tuval üzerinde çizebilirsiniz. Bu bir arka plan görüntüsü olmadan sadece bir tuval var.
• Eğer üç renk düğmeleri hizaya yapmak için bir HorizontalArrangement kullanın: görmüyorum bir bileşen de var.

Hepsi beş bileşenleri kılar. Onları almak ve uygulamayı yapalım.

Renk Düğmeler

• Izleyiciye üzerine bir Button bileşeni sürükleyin ve düğmenin Metin için "Kırmızı" nitelik ve BackgroundColor kırmızı yapmak değiştirin.
• Bunu vurgulamak için görüntüleyiciyi bileşenler listesinde Button1özellikleri tıklayın (zaten vurgulanmış olabilir) ve ButtonRed Button1Gönder adını değiştirmek için Yeniden Adlandır ... düğmesini kullanın.
• Benzer şekilde, adında, mavi ve yeşil ButtonBlue ve ButtonGreen için iki düğmeleri yapmak kırmızı düğmesinin altında dikey yerleştirerek.

İşte bu proje bileşenlerinin listesinde görünen düğme adları ile, tasarımcı bakmak gerekir nasıl. Bu projede, sen daha çok HelloPurr yaptığı gibi varsayılan isimler olarak bunları bırakarak daha bileşenlerin isimlerini değiştiriyoruz. Anlamlı isimler kullanarak kendiniz ve başkaları için projeler daha okunaklı hale getirir.

Ayrıca telefonun ekranında üç düğme görmelisiniz.

Ekran Düzenlemeye Düzeni

Şimdi üç düğme, diğerinin üzerinde olmalıdır. Bir sonraki adım, onları yatay sıraya yapmaktır. Bu bir HorizontalArrangement bileşeni kullanarak yapmak.

1. Palet'ın Ekran Düzenlemesi kategoriden, bir HorizontalArrangement bileşeni dışarı sürükleyin ve düğmeleri altına yerleştirin. ThreeButtons için HorizontalArrangement1 bu bileşenin adını değiştirme
2. Bu ekranın tüm genişliğini doldurur böylece Özellikler panelinde, ... Veli doldurmak için ThreeButtons genişliğini değiştirmek.
3. . HorizontalArrangement bileşen İpucu içine yan tarafından üç düğme tarafı taşı: Sen sürükleyerek konum parça gidecek nereye gösterir mavi dikey bir çizgi görürsünüz.

Eğer proje bileşenlerinin listesinde bakarsanız, şimdi onun alt bileşenleri olduklarını göstermek için ThreeButtons altında girintili üç düğme göreceksiniz. Tüm bileşenler Screen1 altında girintili dikkat edin.

Şeyler Tasarımcısı tam olarak görünmeyebilir, ancak aynı zamanda sizin üç düğme telefon ekranında bir satırda sıraya görmelisiniz. Örneğin, Aranjman anahat Tasarımcısı değil telefonda gösterir.
Genel olarak, basit dikey veya yatay düzenleri oluşturmak için Ekran Düzenlemesi kullanın. Sen yuvalama Ekran Düzenlemeye bileşenleri tarafından daha karmaşık düzenleri oluşturabilirsiniz. Bir TableArrangement bileşeni (bu yazının kapsamı dışındadır) da vardır.

Canvas ve silin düğmesi

Son iki bileşenleri tuval ve düğmesine silin.

1. Palet'ın Temel kategorisinden Görüntüleyici üzerine Canvas bileşenini sürükleyin. DrawingCanvas adını değiştirin. Veli 300 piksel olan Boy Set doldurun onun Set Genişliği.
2. Tuval için bir arka plan görüntüsü eklemek. Yok ... Tuval Özellikler panelinde Backgroundımage yanındaki içeren alana tıklayın. Eğer hala varsa bir önceki öğretici masaüstünüzde, aynı kitty.png dosyasını kullanabilirsiniz. Veya başka bir resmi kullanabilirsiniz.

   İstediğiniz herhangi bir resmi kullanabilirsiniz, ancak (piksel) görüntü boyutu telefonda gösteriyor olacak hangi boyutuna yakın eğer iyi sonuçlar alırsınız. Ayrıca, büyük görüntüler yüklemek için uzun bir zaman alacak, ve uygulamalar için telefon ayırdığı bellek kapasitesini aşabilir.

3. Paleti itibaren, tuval altında yerleştirerek, ekrana nihai düğmesine sürükleyin. Text Wipe özniteliğini değiştirin ButtonWipe onun id değiştirin.

Şimdi app görünümünü ayarlamak için adımları tamamladım. İşte bu Tasarımcısı görünmelidir nasıl. Ardından, bileşenlerin nasıl davrandığını tanımlamak gerekir.

Bileşenlere davranışları ekle

Bloklar Editörü zaten açık olmalıdır. İlk boya rengini değiştirmek düğmeleri ayarlamak.

Düğmesi olay işleyicileri ekleyin

Bloklar Editör:

1. My Blokları sütuna geçin.
2. ButtonRed için çekmeceyi açın ve ne zaman ButtonRed.Click bloğu dışarı sürükleyin.
3. DrawingCanvas çekmeceyi açın. Engellemek için set DrawingCanvas.PaintColor dışarı sürükleyin ve ButtonRed.Click bir do bölümünde yerleştirin (bunu bulmak için çekmece blok liste kaydırmanız gerekebilir).
4. Dahili Sütun geçin. Renkler çekmeceyi açın ve Redrenginde için blok dışarı sürükleyin ve ayarlamak DrawingCanvas.PaintColor koydu.
5. Tekrar mavi ve yeşil düğmeleri için 2-4 adımları.
6. Kurmak için son düğme silin düğmedir. Geri My Blokları sütuna geçin. ButtonWipe çekmeceden zaman ButtonWipe.Click sürükleyerek ButtonWipe için bir tıklatma olay işleyicisi olun. DrawingCanvas çekmeceden, sürükle DrawingCanvas.Clear arayıp ne zaman ButtonWipe.Click blok yapmak alanına koyun.

Bu gibi görünmelidir düğmeleri için bloklar:

Dokunmatik olay işleyicileri ekleyin

Şimdi bir sonraki adım için: Tuval üzerine çizim. Eğer Canvas dokunduğunuzda, size dokunma noktada bir nokta olsun böylece şeyleri düzenlemek olacak. Eğer tuval boyunca yavaş yavaş parmağınızı varsa, bir çizgi çizer.

• Bloklar Düzenleyicisi'nde, tuval için çekmeceyi açın ve çalışma alanına DrawingCanvas.Touched blok sürükleyin.

Eğer blok dışarı sürüklemek en kısa sürede, sağda üç fişleri otomatik olarak adı x denilen blokları, y, ve touchedSprite ile doldurun.
Zaten düğmesini tıklatın olayları gördüm. O oldu ki başka bir tıklamayla hakkında bilmek bir şey yok çünkü Tıklanma, basittir. Böyle ... Dokundu olduğu gibi diğer olay işleyicileri, olay hakkında bilgi gerekir. App Inventor, bu bilgiler olay işleyicisi ile ilişkili argümanların değeri olarak ifade edilir. Zaman ... Dokundu olayı için, ilk iki argüman x ve dokunmatik nerede oldu y koordinatları için stand. Biz bir sonraki eğitim için touchedSprite kaydetmek gerekir.
Bu dokunma olayı, tuval koordinatlar x, y ile noktada küçük bir daire çizin yapmak.

• Tuval çekmeceden bir çağrı DrawingCanvas.DrawCircle komutu sürükleyin ve DrawingCanvas.Touched ne zaman do bölümünde yerleştirin.

DrawingCanvas.DrawCircle olduğunda sağ tarafında dairenin yarıçapıdır üç daire çizilmelidir Eğer x değerleri belirtmek gerekir ve y koordinatları prizler, ve r bulunmaktadır.
X ve y için, Dokundu işleyicisi verildi argümanları değerleri kullanacağız:

1. Kolonun en üstünde, My Tanımlar çekmeceyi açın. Değeri x ve y değeri için blokları bulun. Eğer dokunmatik olay işleyicisi bloğu dışarı sürükledi zaman bloklar otomatik olarak oluşturuldu.
2. Değeri x ve y değer blokları dışarı sürükleyin ve DrawingCanvas.Touched blokta gelen prizlere takın. Değer blokları değil, ilgili isim blokları sürükleyin emin olun; onlar çok benzer.

Ayrıca çizmek için dairenin yarıçapı belirtmek gerekir. Beş (piksel) bu uygulama için iyi bir değer:

• Vurgulu menüyü getirmek ve matematik (yeşil) seçmek için ekranın boş bir alanı tıklatın. Bir sayı bloğunu oluşturmak için, açılan listeden 123 seçiniz. 5 için 123 değiştirin ve yarıçap yuvası için o takın.
  

  Ayrıca sadece 5. Bu bir değere sahip bir sayı bloğunu oluşturmak için, dönüş ardından 5 yazabilirsiniz typeblocking bir örnek: yazmaya başlarsanız, Bloklar Editör adları ne yazıyorsanız eşleşen bloklar bir listesini gösterir; Eğer bir sayı yazarsanız o sayı bloğunu oluşturur.

İşte Dokunma olay işleyicisi görünmelidir nasıl:

Eğer şimdiye kadar telefonda ne deneyin. Renk düğmesine dokunun. Şimdi tuval dokunun ve parmağınızı dokunduğunuz her yerde bir nokta bırakmalısınız. Wipe düğmeye dokunarak çizim temizlemek gerekir.

Sürükle Etkinlik Ekle

Son olarak, sürükle olay işleyicisi ekleyin. Burada bir dokunuş ve sürüklenme arasındaki fark:

• Eğer tuval üzerine parmağınızı koyun ve taşımadan kaldırdığınızda bir dokunuş.
• Sürükle Eğer tuval üzerine parmağınızı koyun ve temas tutarken parmağınızı hareket ettirdiğinizde olduğunu.

Eğer parmağınızı ekranda sürükleyin, bir dev, parmağınızı hareket kavisli bir çizgi çizmek için görünür. Aslında ne yapıyoruz küçük düz çizgilerin yüzlerce çizim: her zaman, onun yeni konumuna sizin parmak ivedi son konumundan hattı uzatmak parmağınızı, hatta biraz hareket.
Sürükle olay 6 argümanlar ile birlikte geliyor. Bunlar x üç çift ve y göstermek olduğunu koordinatları:

• Parmağınızın pozisyonu sırt sürükleme nerede başladığını.
• Parmağınızın geçerli konumu.
• Parmağınızın hemen önceki konum.

Bu eğitim için görmezden edeceğiz sprite, da var.
Şimdi önceki pozisyonda ve bir sürükle işleyicisi oluşturarak mevcut pozisyonu arasında bir çizgi çizmek sürükleyerek yapmak:

1. DrawingCanvas çekmeceden, çalışma alanına DrawingCanvas.Dragged blok sürükleyin.
2. Ayrıca DrawingCanvas çekmeceden, DrawingCanvas.Dragged blok do yuvasına çağrı DrawingCanvas.DrawLine bloğu sürükleyin.
3. Benim Tanımlar çekmecenin üzerine tıklayın. Size ihtiyacınız argümanlar için bloklar görmelisiniz. DrawingCanvas.Dragged zaman uygun yuvalara karşılık gelen değer blokları Drag: X1 ve Y1 ve prevx prevY olmalıdır, X2 ve Y2 CurrentX ve birlikte kullanımı, halihazırda olmalıdır

İşte sonuç:

Telefonda deneyerek işinizi test: çizgiler ve eğriler çizmek için parmağınızı ekranda etrafında sürükleyin. Noktalar yapmak için ekrana dokunun. Ekranı temizlemek için silin düğmesini kullanın.