Beiträge von Basi

  • html5 canvas rubbeleffekt

    Ich würde wie folgt vorgehen: Entferne mal das click Event vom Canvas Objekt komplett und übernimm die Weiterleitung einfach mit in den mouseup handler:

    JavaScript: 257
    percentage = pixel * 100 / 75000;




if (percentage > 90) {
    window.location.href = "http://www.google.at";
}

  • html5 canvas rubbeleffekt

    Keine Sorge du nervst nicht, ich habe das "Rätsel" jetzt mal entheddert. Grundlegend hatten wir 2-3 Probleme. Bitte beachte die Zeilennummern am Rand der Codebeispiele, ich habe mich da an deinen Zeilen orientiert.

    Du hast nun die Analyse des Bildes in die mouseup Funktion verschoben, jedoch in einen Bereich der nie ausgeführt wird, nämlich nach dem Return. Zeile 206 bis 254 müssen verschoben werden unter Zeile 200:

    JavaScript: 200
    if (e.cancelable) { e.preventDefault(); } 




// genauigkeit der pruefung
tolerance = 3;
// ...

    Das nächste Problem ist in der gesuchten Farbe zu Hause. Es wird derzeit überprüft wie viele Pixel des Bildes schwarz sind, siehe Zeile 120. Dort muss die Farbe des HINTERGRUNDES stehen, sprich das hellere Grün, dies habe ich mal eben heraus gefunden:

    JavaScript: 120
    rgb =
{
    r: 7,
    g: 225,
    b: 131
}


    In Zeile 219 verwendest du die ID 'draw', musst allerdings die ID 'maincanvas' nutzen, welche du im HTML Bereich definiert hast, das sieht man auch noch in den 2 darüber liegenden, auskommentierten Zeilen.

    Ich weiß gerade nicht mehr genau ob ich noch etwas geändert habe, bitte probiere es mal so und melde dich ob es klappt, wenn nicht sage doch bitte noch mal kurz Bescheid dann schaue ich erneut. Ich trage es sowieso nach wenn es mir gleich noch einfällt :)

  • html5 canvas rubbeleffekt

    Ich kann auch an der Stelle nur ganz klar empfehlen die Sache vielleicht noch mal von vorne aufzurollen. Du hast jetzt deine eigenen Funktionen mit meinen vermischt und darunter leidet die Übersicht derzeit stark. Du verwendest viele verschiedene Variablen mit unterschiedlichen Namen für die gleichen Inhalte, was auch auf mehrfache Überarbeitung schließen lässt.

    Am Besten schreibst du dir einen kurzen Ablaufplan, fängst dann an deine Funktionen zu definieren und diese dann in logischer Reihenfolge auszuführen. Ein Neuanfang ist in diesem Fall vermutlich schneller und einfacher als sich ewig durch die Zeilen zu arbeiten. Des Weiteren hast du dannvon Anfang an den Überblick über deine Funktionen, so kannst du persönlich Fehler schneller ausfindig machen und hast auch die Laufzeit im Blick.

    Wenn du dabei Hilfe brauchst darfst du natürlich gerne jederzeit fragen. Wenn du deinen aktuellen Code behalten willst musst du unter Umständen warten bis sich jemand erbarmt die Kiste aufzuarbeiten :rolleyes:

  • html5 canvas rubbeleffekt

    Ja in Zeile 332 musst du canvas noch mit main ersetzen, dort wird natürlich das DOM Element für die Breite und Höhe benötigt:

    JavaScript
    dimension = main.width * main.height;


    Außerdem musst du bedenken, dass du die Überprüfung, also grob Zeile 296 bis 335, bei jedem mouseup Event ausführen musst und nicht nur anfangs ein mal. Also verschieben in die mouseup_handler Funktion. Die entsprechenden Funktionen (hex2rgb und checkTolerance) dementsprechend an den Script-Anfang.

  • html5 canvas rubbeleffekt

    Das click Event vom Canvas blockiert das click Event auf den anchor-Tag. Das siehst du auch wenn du ohne rubbeln auf den Rand drückst, man wird weitergeleitet. Am Cmputer (Firefox) wird man direkt weitergeleitet wenn man auf das Feld klickt um zu rubbeln. Du solltest hier den Link entfernen und alles über ein Click-Event am Canvas direkt lösen:

    HTML
    <div class="hidden" id="main"> 
    <canvas id="maincanvas"></canvas>
</div>
    JavaScript
    document.getElementById("maincanvas").addEventListener("click", function(){
    if(percentage < 90)
        window.location.href = "http://www.google.at";
});


    Oder Alternativ wenn du einen neuen Tab erzwingen möchtest etwas in die Richtung:

    JavaScript
    document.getElementById("maincanvas").addEventListener("click", function(){
    if(percentage < 90)
        window.open
        (
            "http://www.google.at"',
            "_blank" 
        );
});


    Auf Windows Phone funktioniert dein Rubbelfeld ürigens überhaupt nicht, lediglich der Link lässt sich am Rand aufrufen. Das liegt daran, dass WP8.1 touch Events nicht unterstützt, sondern auf Click Events zurückgreift, leider muss man "touchmove" demnach etwas umständlich lösen.

  • CSS Layout

    Hi, wenn du die Breite des letzten DIVs entsprechend anpasst funktioniert das Ganze doch einwandfrei: codepen.io Beispiel 1

    Die Elemente nutzen hier automatisch die verfügbare Fläche, wenn du einen Umbruch erzwingen möchtest musst du das float: left; nur ein mal an entsprechender Stelle mit clear: left; unterbrechen: codepen.io Beispiel 2 (Siehe CSS Zeile 32).