Jak stworzyć taką aplikację. Opcje

[RosheD]

Witam bardzo serdecznie Czuje się już sławny na tym forum po przez tyle zadawanych pytań .
Więc jak stworzyć aplikację internetową która na przykład będzie zmieniała na obrazku kolor farby na ścianie po przez wybraną opcje?
Myślałem nad tym i jedyne co mi przychodzi na myśl to wycięcie tej ściany w photoshopie jako 2 obrazki. Później w css zrobić tak aby były idealnie takie same i za każdym razem gdy ktoś wybierze daną opcje wczyta dany obrazek bez refresh dzięki ajax. Ale czy da się to zrobić łatwiej bez konieczności własnoręcznego kolorowania ściany w photoshopie do każdej możliwości ?

[Kshyhoo]

HTML5 - canvas.

[RosheD]

I jak za pomocą tego na przykład mogę zmienić wspomnianą wcześniej farbę na ścianie? Musze na tym jednym obrazku za pomocą tego wyciąć całą tą ścianę i do jakiejś zmiennej po prostu kolor?

[!*!]

Na zdjęciu zaznaczasz odpowiednie sektory poprzez map area w html5 http://www.html-5-tutorial.com/map-and-area-elements.htm
zaznaczony obszar ma obejmować daną ścianę, lub cokolwiek innego (poszukaj w necie gotowców do tworzenia takich map, jest tego od groma na podstawie wgranego zdjęcia). Koordynaty przesyłasz do elementu canvas i w zależności jaki kolor wybrałeś w obszarze mapy zmieniasz kolor/nakładasz teksturę.

[RosheD]

Czyli mniej więcej tak to wprowadzać?

[HTML] pobierz, plaintext 
 <area shape="poly" coords="181, 238, 184, 264, 145, 264, 141, 246" style="background: #eee;" />
    <area shape="poly" coords="144, 265, 181, 268, 182, 277, 149, 277" />
    <area shape="poly" coords="67, 295, 68, 331, 81, 334" />
    <area shape="poly" coords="1, 222, 179, 203, 179, 244, 141, 245, 111, 247, 84, 253, 63, 259, 56, 261, 60, 276, 59, 282, 60, 315, 59, 332, 0, 355" />
    <area shape="poly" coords="4, 17, 1, 0, 496, 0, 498, 73, 258, 91" />
    <area shape="poly" coords="6, 23, 259, 90, 181, 201, 1, 218" />
[HTML] pobierz, plaintext 

I teraz do canvas (wprowadziłem pierwszą linijkę) :

var c2 = document.getElementById('c').getContext('2d');
c2.fillStyle = '#000';
c2.beginPath();
c2.moveTo(0, 0);
c2.lineTo(181, 238);
c2.lineTo(184, 264);
c2.lineTo(145, 264);
c2.lineTo(141, 246);
c2.closePath();
c2.fill();

[werdan]

I co? Działa?

Canvasa "połóż" na obrazku, powinno śmigać.

[RosheD]

$(document).ready(function() {
var canvas = $('#test');
var context = canvas.get(0).getContext('2d');
context.fillStyle = 'rgb(156,255,40)';
context.fillRect(181, 238, 184, 264, 145, 264, 141, 246);
context.fillRect(144, 265, 181, 268, 182, 277, 149, 277);
context.fillRect(67, 295, 68, 331, 81, 334);
context.fillRect(1, 222, 179, 203, 179, 244, 141, 245, 111, 247, 84, 253, 63, 259, 56, 264, 60, 276, 59, 282, 60, 315, 59, 332, 0, 355);
context.fillRect(4, 17, 1, 0, 496, 0, 498, 73, 258, 91);
context.fillRect(6, 23, 259, 90, 181, 201, 1, 218);
});

Ni w oko to tak samo nie wygląda... Jak dokładnie ma wyglądać ten skrypt ? Z Góry wielkie dzięki za każdą odpowiedz która coś wnosi.

Ten post edytował RosheD 4.01.2014, 00:09:04

[!*!]

Kod umieszczaj w odpowiednich tagach na forum.
Zapoznaj się pierw z jakimś kursem "html5 canvas".
Na kopiuj/wklej raczej tego nie zrobisz.
http://www.c-sharpcorner.com/UploadFile/99...h-html5-canvas/

[RosheD]

Ok rozumiem. A teraz jak są poukładane cordy w area ? Co jest co? Gdzie tu moveTo?

Daj my na to że jest jeden area do zakodowania pod canvas

[HTML] pobierz, plaintext 
<area shape="poly" coords="67, 295, 68, 331, 81, 334" />
[HTML] pobierz, plaintext 

A więc :

window.onload = function () {
var landscape_canvas = document.getElementById("landscape1");
var ctx = landscape_canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 600, 450);
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(67, 295, 68, 331);
ctx.quadraticCurveTo(81, 334);
ctx.stroke();
ctx.beginPath();
}

W ten sposób miało by to wyglądać ? Co jeśli zamiast 4 pozycji zostały 2? Jak je wprowadzać?

Ten post edytował RosheD 5.01.2014, 11:18:53