Leinwand Klar in Paper.js

Weiß wer, der beste Weg, um klar eine Leinwand mit paper.js
Ich habe versucht, die regelmäßige Leinwand clearing-Methoden, aber Sie scheinen nicht zu arbeiten mit paper.js

Html

<canvas id="myCanvas" style="background:url(images/graphpaper.jpg); background-repeat:no-repeat" height="400px" width="400px;"></canvas>

<button class="btn btn-default button" id="clearcanvas" onClick="clearcanvas();"     type="button">Clear</button>

Javascript/Paperscript

<script type="text/paperscript" canvas="myCanvas">
//Create a Paper.js Path to draw a line into it:
tool.minDistance = 5;

var path;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

function onMouseDown(event) {
//Create a new path and give it a stroke color:
path = new Path();
path.strokeColor = 'red';
path.strokeWidth= 3;
path.opacity="0.4";

//Add a segment to the path where
//you clicked:
path.add(event.point, event.point);
}

function onMouseDrag(event) {
//Every drag event, add a segment
//to the path at the position of the mouse:
path.add(event.point, event.point);

}


</script>
InformationsquelleAutor craig | 2013-09-27
  1. 18

    Regelmäßigen clearing-funktioniert nicht, weil paper.js unterhält eine Szene Graphen und kümmert sich um die Zeichnung für Sie. Wenn Sie möchten, deaktivieren Sie alle Elemente, die Sie erstellt haben, in ein Projekt zu löschen, muss man die eigentlichen Elemente:

    project.activeLayer.removeChildren(); funktioniert, solange alle Ihre Elemente in einer Ebene. Es ist auch project.clear() entfernt alles, einschließlich der Ebene.

    InformationsquelleAutor Jürg Lehni
  2. 3

    Den Fall, dass jemand kommt, nach einer Antwort zu suchen mit wenig Erfahrung in Javascript, habe ich ein einfaches Beispiel :

    1) Jürg Lehni erwähnt project.activeLayer.removeChildren(); kann verwendet werden, entfernen Sie alle Elemente innerhalb der aktiven Schicht.
    2) entsprechend die Reinigung zu nennen paper.view.draw();.

        <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Circles</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="paper-full.js"></script>
        <script type="text/paperscript" canvas="canvas">

function onMouseUp(event) {
   var circle = new Path.Circle({
    center: event.middlePoint,
    radius: event.delta.length / 2
});
circle.strokeColor = 'black';
circle.fillColor = 'white';

}

</script>

<script type="text/javascript">
    paper.install(window);
    window.onload = function () {
        paper.setup('canvas');
         document.getElementById('reset').onclick = function(){

            paper.project.activeLayer.removeChildren();
            paper.view.draw();

        } 

    };

  </script>      
</head>
<body>
    <canvas style="background-color: #eeeeed" id="canvas" resize></canvas> 
    <input id="reset" type="button" value="Reset"/>
</body>
</html>

    CSS :

    html,
body {
   margin: 0;
   overflow: hidden;
   height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
  width: 58%;
  height: 100%;
}
    InformationsquelleAutor rohan-patel
  3. 1

    c.width = c.width; ctx.clearRect(0,0,c.width,c.height); sollte ein gutes Fangnetz, wenn Sie habe es nicht ausprobiert.

    Aber Vorsicht - setzen Breite des Grafikbereichs wird zurücksetzen der Leinwand Zustand inklusive alle verwendeten Transformationen.

    Einer schnellen google hat mich zu https://groups.google.com/forum/#!Thema/paperjs/orL7YwBdZq4, die angibt, ein weiterer (mehr paper.js bestimmte) Lösung:
    project.activeLayer.removeChildren();

    • Die oben genannten Befehl, den Sie beschrieben, löscht der Leinwand, nicht die Szene-graph. Aber der zweite funktioniert einwandfrei.
    InformationsquelleAutor Rob Hardy
  4. 0

    können Sie project.activeLayer.removeChildren(); für klare ganze Ebene,
    oder Sie können fügen Sie Ihre neue Wege der Gruppe, und entfernen Sie alle Kinder in der Gruppe

    var myPath;
var group = new Group();

function onMouseDown(event) {
    myPath = new Path();
}

function onMouseDrag(event) {
    myPath.add(event.point);
}

function onMouseUp(event) {

    var myCircle = new Path.Circle({
        center: event.point,
        radius: 10
    });
    myCircle.strokeColor = 'black';
    myCircle.fillColor = 'red';
    group.addChild(myCircle);
}


    //connect your undo function and button
    document.getElementById('clearbutton').onclick = btnClear;

    function btnClear(){
        group.removeChildren();
    }
    InformationsquelleAutor Ishara Madawa
Schreibe einen Kommentar