HTML5 Canvas: kurgulama Bireysel Yollar

nasıl bir javascript değişken/diziye spesifik bir yolunu kaydedebilir ve daha sonra bir HTML5 tuval kullanarak, ne zaman manipüle? İşte ben bugüne kadar ne yapıyorum:HTML5 Canvas: kurgulama Bireysel Yollar

    ctx.beginPath(); 
         ctx.moveTo(lastX,lastY); 
         ctx.lineTo(x,y); 
         ctx.lineWidth = s*2; 
         ctx.stroke(); 
        ctx.closePath();

Şimdi, ne gerek, zaman zaman, bir dizideki bu yolu saklamak mümkün olmaktır. Ardından, dizideki tüm yolların rengini değiştirip daha sonra değiştirmem gerekiyor. (Açıkçası, ya bunu nasıl bilmiyorum.) Bunu temizlemek ve yeniden çizerek olmadan tuval görünümünü değiştiremez tuval olarak

kaynak

2013-10-19 J S

Belki bir fonksiyonu bu işlemlere kaydetmek? Böylece bir dizi fonksiyona sahip olacaksınız. – Cristy

Bu tür bir işleve ihtiyacınız olduğunda, SVG'yi kullanmayı düşünün. – slebetman

; bu yüzden tuvali çizmek için bir işlev oluşturmanız gerekir. Dizide satır konumlarınızı saklayın, işlev döngüsü sırasında dizi boyunca bunları ekleyin ve ekleyin. Açıkçası, tuvali istediğiniz zaman yeniden çizebilirsiniz; Genellikle, bir olay dinleyicisi veya zamanlama olayı

kaynak

2013-10-19 21:34:13 Braders

Kısa cevap kuracak: bunu yapamazsınız. Canvas2D API'sinin bir sonraki taslağında (bkz. http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#path-objects), ancak henüz desteklenmiyor.

Daha uzun yanıt: yapamazsınız, ancak bir yolu temsil eden bir nesne yazabilir ve draw(canvas) işlevini, seçtiğiniz renkler ve dolgu özellikleriyle kendini bir tuvale çizmesini sağlayabilirsiniz. Örneğin: Eğer bir javascript nesnesine bir yol çizmek için gerekli tüm verileri seri hale

var Path = function() { 
    this.instructions = []; 
} 
Path.prototype = { 
    instructions: [], 
    moveTo: function(x,y) { 
    instructions.push({ 
     type: "moveTo", 
     arguments: [x,y] 
    }); 
    } 
    ... 
    draw: function(canvas) { 
    var ctx = canvas.getContext("2d"); 
    ctx.beginPath(); 
    this.instructions.forEach(function(i) { 
     ctx[i.type].apply(i.arguments); 
    }); 
    ctx.closePath(); 
    } 
}

kaynak

2013-10-19 21:34:22

Bu işe yarıyor, tam olarak nasıl giderim? Cevaplamak için –

cevabı düzenlenmiştir. –

Sadece "Yol" nesnesinin gelecekteki yol için ayrıldığından emin olun. – K3N

Javascript nesneleri kullanmanın avantajı taşımak gerekirse daha da JSON nesne seri olmasıdır Farklı bir konuma giden yolların (bir sunucuya dönüş gibi).

var path1={ 
    lineWidth:1, 
    stroke:"blue", 
    points:[{x:10,y:10},{x:100,y:50},{x:30,y:200}] 
};

Sonra/yolları renklerini değiştirmek için bu yolu

function draw(path){ 

     // beginPath 
     ctx.beginPath(); 

     // move to the beginning point of this path 
     ctx.moveTo(path.points[0].x,path.points[0].y); 

     // draw lines to each point on the path 
     for(pt=1;pt<path.points.length;pt++){ 
      var point=path.points[pt]; 
      ctx.lineTo(point.x,point.y); 
     } 

     // set the path styles (color & linewidth) 
     ctx.strokeStyle=path.stroke; 
     ctx.lineWidth=path.lineWidth; 

     // stroke this path 
     ctx.stroke(); 
    }

yeniden çizme çizmek için bu nesneyi kullanabilirsiniz, sadece) (nesnenin kontur özelliğini değiştirmek ve çizmek aramak zorunda tekrar: http://jsfiddle.net/m1erickson/McZrH/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    // get references to canvas and context 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    // serialize paths to a javascript objects 
    var path1={lineWidth:1, stroke:"blue", points:[]}; 
    var path2={lineWidth:4, stroke:"red", points:[]}; 

    // save the paths to an array 
    var paths=[]; 
    paths.push(path1); 
    paths.push(path2); 


    // build test path1 
    newPoint(25,25,path1); 
    newPoint(100,50,path1); 
    newPoint(50,75,path1); 
    newPoint(25,25,path1); 

    // build test path2 
    newPoint(200,100,path2); 
    newPoint(250,100,path2); 
    newPoint(250,200,path2); 
    newPoint(200,200,path2); 
    newPoint(200,100,path2); 

    // draw the paths defined in the paths array 
    draw(); 

    // add a new point to a path 
    function newPoint(x,y,path){ 
     path.points.push({x:x,y:y}); 
    } 


    function draw(){ 

     ctx.clearRect(0,0,canvas.width,canvas.height); 

     for(p=0;p<paths.length;p++){ 

      // get a path definition 
      var path=paths[p]; 

      // beginPath 
      ctx.beginPath(); 

      // move to the beginning point of this path 
      ctx.moveTo(path.points[0].x,path.points[0].y); 

      // draw lines to each point on the path 
      for(pt=1;pt<path.points.length;pt++){ 
       var point=path.points[pt]; 
       ctx.lineTo(point.x,point.y); 
      } 

      // set the path styles (color & linewidth) 
      ctx.strokeStyle=path.stroke; 
      ctx.lineWidth=path.lineWidth; 

      // stroke this path 
      ctx.stroke(); 

     } 

    } 

    // test 
    // change the stroke color on each path 
    $("#recolor").click(function(){ 
     paths[0].stroke="orange"; 
     paths[1].stroke="green"; 
     draw(); 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="recolor">Recolor</button><br> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

012: İşte

paths[0].stroke="orange"; 
    paths[1].stroke="green"; 
    draw();

kod ve bir keman olduğunu yeni bir path2D nesne ile artık mümkün gibi

kaynak

2013-10-19 22:27:45 markE

görünüyor. (31+ Firefox temin edilebilir)

yeni Path2D API, tuval çizim kodunu kolaylaştırır ve daha hızlı koşmak yapar yolları saklamak sağlar.

new Path2D();  // empty path object 
new Path2D(path); // copy from another path 
new Path2D(d); // path from from SVG path data

, oluşturmak için SVG yolu veriyi alır, özellikle kullanışlı olan üçüncü versiyonu,: Yapıcı bir Path2D bir nesne oluşturmak için üç yol sağlar. Artık hem bir tuval üzerine doğrudan aynı şekiller çizmek için SVG yolları yeniden kullanabilirsiniz:

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

Bilgi Mozilla official site alınır.

kaynak

2015-03-07 09:44:54

Teşekkürler, bu çok iyi çalışıyor! –

Bu yardımcı olabilir: Size o zaman bu işlevi tarafından yorumlanır ve eylemler gerçekleştirilir harf ve rakamlardan oluşan bir dize, kullanmasına olanak veren bir işlev var

http://www.rgraph.net/blog/2015/september/svg-style-paths-for-canvas-with-the-rgraph-path-function.html

. Şimdi yolunuz bir dizi olabilir - tıpkı SVG yolları gibi - ve bir veritabanında dolaşmak ve/veya depolamak çok daha kolaydır.

Yani bir dikdörtgen çizmek için bir yol gibi görünebilir:

b r anlamına kırmızı

f 5 5 100 100:

b: beginPath() 
r: rect() 
f: fill()

kaynak

2016-01-22 10:03:41 Richard

HTML5 Canvas: kurgulama Bireysel Yollar

cevap

İlgili konular