Canvas rõ ràng trong Paper.js

Có ai biết cách tốt nhất để xóa một canvas sử dụng paper.js Tôi đã thử các phương pháp thanh toán bù trừ vải bình thường nhưng họ dường như không làm việc với paper.jsCanvas rõ ràng trong 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>

Nguồn

2013-09-27 craig

c.width = c.width; ctx.clearRect(0,0,c.width,c.height); phải là một catchall tốt nếu bạn đã không thử nó.

Hãy coi chừng tuy nhiên - chiều rộng canvas thiết lập sẽ đặt lại trạng thái canvas bao gồm mọi biến đổi được áp dụng.

Một google nhanh chóng đưa tôi đến https://groups.google.com/forum/#!topic/paperjs/orL7YwBdZq4 đó quy định cụ thể khác (hơn paper.js cụ thể) giải pháp: project.activeLayer.removeChildren();

Nguồn

2013-09-27 15:52:10

Các lệnh trên bạn mô tả, vọt qua vải, không phải là đồ thị Scene. Tuy nhiên, thứ hai không hoạt động tốt. –

thanh toán bù trừ thường xuyên không làm việc vì paper.js duy trì một đồ thị trường và chăm sóc vẽ nó cho bạn . Nếu bạn muốn xóa tất cả các mục mà bạn đã tạo trong một dự án, bạn cần phải xóa các mục thực tế:

project.activeLayer.removeChildren(); hoạt động miễn là tất cả các mục của bạn nằm trong một lớp. Ngoài ra còn có project.clear() để xóa mọi thứ, kể cả lớp.

Nguồn

2013-10-10 10:43:15

Trong trường hợp ai đó đi kèm tìm kiếm một câu trả lời với ít kinh nghiệm trong Javascript, tôi đã làm một ví dụ đơn giản:

1) Như Jürg Lehni nêu project.activeLayer.removeChildren(); thể được sử dụng để loại bỏ tất cả các mục bên trong lớp hoạt động. 2) Để phản ánh việc lau dọn, bạn phải gọi 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%; 
}

Nguồn

2015-05-08 08:13:41

Canvas rõ ràng trong Paper.js

Trả lời

Các vấn đề liên quan