Merhabalar. Aşağıdaki örnekte html5 elementi olan canvas üzerinde çizim yapmak istiyorum. Çizimi çift tıklama bitirecek ve yeni oluşan bir dizinin içeriği ile bir alan oluşturacak kadar ilerledim. Ancak çizim işi bittikten sonra başka bir alan çizmeye başladığımda eski çizmeye devam ediyor. Ben bitirdiğim alanın bittiği haliyle canvasta kalmasını, yeni bir çiziminde bağımsız olarak başlayıp bitmesini istiyorum. Şimdiden teşekkürler. Kodlar aşağıdaki gibidir. Canlı sürüm : http://jsfiddle.net/xm32um14/

`<html> <head> <title>Orhan ALTIN</title> <meta charset="utf-8"> <style> canvas{ border: 5px solid; border-color: rgb(255,173,50); } </style> </head> <body> <canvas id="tuval" width="500" height="500"></canvas> <script> var tuval = document.getElementById("tuval"); var kaynak = tuval.getContext("2d"); var simdiX=[]; var simdiY=[]; var sonraX=[]; var sonraY=[]; var cizgiler=[]; var cizgi={ x1:0, y1:0 }; var bas=0; var fare={ xx:0, yy:0 }; var cevre=tuval.getBoundingClientRect(); var cizimyap=false; var yeni=0;

    tuval.addEventListener("click",function

temizle(olay){

            cizimyap=true;

            fare={
            xx:olay.clientX-cevre.left,
            yy:olay.clientY-cevre.top
            };
            cizgi.x1=fare.xx;
            cizgi.y1=fare.yy;
            bas=bas+1;
            kaynak.moveTo(fare.xx,fare.yy);

            bas++;
            if(bas>1){
                cizgiler.push({
                    xx1:cizgi.x1,
                    yy1:cizgi.y1,
                    xx2:cizgi.x2,
                    yy2:cizgi.y2
                    });
            }

            tuval.addEventListener("mousemove",

function oynat(olay){
if (cizimyap) { kaynak.clearRect(0,0,tuval.width,tuval.height); kaynak.beginPath(); for (var i = 0, max = cizgiler.length; i < max; i++) { var dizi=cizgiler[i]; kaynak.moveTo(dizi.xx2,dizi.yy2); kaynak.lineTo(dizi.xx1,dizi.yy1); kaynak.stroke(); simdiX.push(dizi.xx1); simdiY.push(dizi.yy1); } kaynak.moveTo(fare.xx,fare.yy); kaynak.lineTo(olay.clientX-cevre.left,olay.clientY-cevre.top); kaynak.stroke();

                    }
            });

            tuval.addEventListener("dblclick",

function(){

                cizimyap=false;

                 poligonYap(olay);

            });

    });

    function poligonYap(olay){

            simdiX.splice(simdiX.length-1,1,simdiX[0]);
            simdiY.splice(simdiY.length-1,1,simdiY[0]);
            kaynak.clearRect(0,0,tuval.width,tuval.height);

    for (var i = 0, max = cizgiler.length; i < max; i++) {
        //var dizi=cizgiler[i];
                kaynak.strokeStyle="green";
                kaynak.lineWidth="1";
                kaynak.lineCap="round";
                sonraX[i]=simdiX[i];

                sonraY[i]=simdiY[i]; 
                kaynak.lineTo(sonraX[i],sonraY[i]);
                kaynak.stroke();
                kaynak.fillRect(cizgiler[i].xx1-5/2,cizgiler[i].yy1-5/2,5,5);
            }
    }

    </script>

</body> </html>`

soruldu: 19 Oca '15, 04:38

orhaltin's gravatar image

orhaltin
66336
cevap kabul oranı: 0%

değiştirildi: 19 Oca '15, 06:21

1

Sorunuzu http://jsfiddle.net/ benzeri bir platformla güçlendirip daha kolay yardım alabilirsiniz.

(19 Oca '15, 04:47) barteloma barteloma's gravatar image

Konuyu tavsiyeniz üzerine güncelledim. Teşekkürler.

(19 Oca '15, 06:22) orhaltin orhaltin's gravatar image
Bu soruya ilk cevap veren sen ol!
toggle preview

Bu soruyu takip et

E-Posta üzerinden:

Üyelik girişi yaptıktan sonra abonelik işlemlerini yapabilirsiniz

RSS üzerinden:

Cevaplar

Cevaplar ve Yorumlar

Yazı Formatlama

  • *italic* ya da _italic_
  • **bold** ya da __bold__
  • link:[text](http://url.com/ "başlık")
  • resim?![alt text](/path/img.jpg "başlık")
  • liste: 1. Foo 2. Bar
  • temel HTML etiketleri de kullanılabilir

Bu sorunun etiketleri:

×137
×23

Soruldu: 19 Oca '15, 04:38

Görüntüleme: 462 kez

Son güncelleme: 19 Oca '15, 06:22

powered by BitNami OSQA