Χρωματισμός 2 ξεχωριστών πλαισίων με επιλογή χρώματος από τον χρήστη

ΜΑΝΩΛΗΣ1 · 11 Ιουνίου 2016

Θέλω να φτιάξω (δεν ξέρω αν μπορώ) μια εφαρμογή η οποία μάλλον είναι σε Javascript (μπορεί να γίνεται και πιο εύκολα)

με την οποία θα μπορεί ο χρήστης για την παρακάτω φωτογραφία πχ να επιλέγει από μια παλέτα χρωμάτων το χρώμα που είναι καφέ , και να το αλλάζει . Και από μια άλλη παλέτα η οποία θα είναι δίπλα να επιλέγει το χρώμα που είναι κίτρινο.

Η παραπάνω εφαρμογή θέλω να μπει σε μια σελίδα στο internet. Δεν ήξερα πως να το ψάξω στα αγγλικά

AlexHello · 11 Ιουνίου 2016

Μπορείς

ΜΑΝΩΛΗΣ1 · 11 Ιουνίου 2016

Ναι αλλά δεν ξέρω καθόλου προγραμματισμό. Εκτός αν πάρω ένα έτοιμο script ..

nikos032 · 11 Ιουνίου 2016

Μπορείς να πληρώσεις έναν προγραμματιστή για να στο φτιάξει

doctor_667 · 11 Ιουνίου 2016

http://jscolor.com/examples/

mentoras28 · 11 Ιουνίου 2016

Γιατι δεν το βαζεις στις αγγελιες? http://www.insomnia.gr/classifieds/various/jobs/

Αν θελεις βοηθεια στειλε κωδικα με το τι εχεις να σε βοηθησουμε

anon667 · 11 Ιουνίου 2016

Γεια σου φίλε μου,

Βαριόμουν και είπα να σου ετοιμάσω μία πρόχειρη δουλειά.

Επιλέγεις με τα Inner/Outer radiobuttons τι θέλεις να αλλάξει χρώμα και μετά επιλέγεις από την παλέττα.

Έγιναν γρήγορες αλλαγές από άλλο demo (http://www.html5canvastutorials.com/labs/html5-canvas-color-picker/), οπότε excuse the quality.

No further support, enjoy.

Αφού πετάξεις τον κώδικα σε ένα html αρχείο, να βάλεις στο ίδιο folder την εικόνα color-picker.png που αναφέρεται μέσα σε ένα σχόλιο.

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

    </style>

  </head>

  <body>

    <canvas id="myCanvas" width="732" height="388"></canvas>

    <input type="radio" name="user_options" value="outer">Outer</input>

    <input type="radio" name="user_options" value="inner">Inner</input>

    

    <script>

        var outerColor = 'orange';

        var innerColor = 'yellow';

        

      function getMousePos(canvas, evt) {

        var rect = canvas.getBoundingClientRect();

        return {

          x: evt.clientX - rect.left,

          y: evt.clientY - rect.top

        };

      }

      

      function drawT1(canvas, color, x, y, width, height) {

        var context = canvas.getContext('2d');



        context.beginPath();

        context.fillStyle = color;

        context.fillRect(x, y, width, height);

        context.strokeRect(x, y, width, height);

      }



    // return 0 if Outer selected, 1 if Inner

    function getRadio() {

        var fv = 0;

        

        var radios = document.getElementsByName('user_options');

          

        for (var i = 0, length = radios.length; i < length; i++) {

            if (radios[i].checked) {

                fv = i;



                // only one radio can be logically checked, don't check the rest

                break;

            }

        }

        

        return fv;

    }

      function init(imageObj) {

        var padding = 10;

        var canvas = document.getElementById('myCanvas');

        var context = canvas.getContext('2d');

        var mouseDown = false;



        context.strokeStyle = '#444';

        context.lineWidth = 2;



        canvas.addEventListener('mousedown', function() {

          mouseDown = true;

        }, false);



        canvas.addEventListener('mouseup', function() {

          mouseDown = false;

        }, false);



        canvas.addEventListener('mousemove', function(evt) {

          var mousePos = getMousePos(canvas, evt);

          var color = undefined;

          

          if(mouseDown && mousePos !== null && mousePos.x > padding && mousePos.x < padding + imageObj.width && mousePos.y > padding && mousePos.y < padding + imageObj.height) {



            // color picker image is 256x256 and is offset by 10px

            // from top and bottom

            var imageData = context.getImageData(padding, padding, imageObj.width, imageObj.width);

            var data = imageData.data;

            var x = mousePos.x - padding;

            var y = mousePos.y - padding;

            var red = data[((imageObj.width * y) + x) * 4];

            var green = data[((imageObj.width * y) + x) * 4 + 1];

            var blue = data[((imageObj.width * y) + x) * 4 + 2];

            var color = 'rgb(' + red + ',' + green + ',' + blue + ')';

            

            var radioId = getRadio();

            

            if (radioId == 0)

                outerColor = color;

            else if (radioId == 1)

                innerColor = color;

                

            drawT1(canvas, outerColor, 280, 80, 400, 250);

                

            drawT1(canvas, innerColor, 330, 100, 300, 200);

            drawT1(canvas, 'white', 350, 120, 260, 160);

            drawT1(canvas, innerColor, 470, 120, 20, 160);

          }

        }, false);



        context.drawImage(imageObj, padding, padding);



        drawT1(canvas, outerColor, 280, 80, 400, 250);

            

        drawT1(canvas, innerColor, 330, 100, 300, 200);

        drawT1(canvas, 'white', 350, 120, 260, 160);

        drawT1(canvas, innerColor, 470, 120, 20, 160);

      }

      

      var imageObj = new Image();

      imageObj.onload = function() {

        init(this);

      };

      

      //'http://www.html5canvastutorials.com/demos/assets/color-picker.png'

      imageObj.src = 'color-picker.png';



    </script>

  </body>

</html>

ΜΑΝΩΛΗΣ1 · 11 Ιουνίου 2016

Ευχαριστω όλους για την βοήθεια. Θα το παλέψω με τον κώδικα

Σύνδεση

Χρωματισμός 2 ξεχωριστών πλαισίων με επιλογή χρώματος από τον χρήστη

Προτεινόμενες αναρτήσεις

ΜΑΝΩΛΗΣ1

AlexHello

ΜΑΝΩΛΗΣ1

nikos032

doctor_667

mentoras28

anon667

ΜΑΝΩΛΗΣ1

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση