API tools faq
paste
boris-vlasenko

paprejs_drawing

boris-vlasenko
May 7th, 2020
249
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Проверка рисования на холсте PaperJS</title>
  6.     <script type="text/javascript" scr="dist/paper-core.min.js"></script>
  7.     <script src="http://paperjs.org/assets/js/paper.js"></script>
  8.     <script
  9.      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  10.      integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  11.      crossorigin="anonymous"></script>
  12.      
  13. <style type="text/css">
  14. html,
  15. body {
  16.     height: 100%;
  17. }
  18.  
  19. /* Scale canvas with resize attribute to full size */
  20. canvas[resize] {
  21.     width: 100%;
  22.     height: 100%;
  23. }
  24.  
  25. .color_item{
  26.     border: 1px solid black;
  27.     border-collapse: collapse;
  28. }
  29. </style>
  30.  
  31.  
  32. <!--
  33. <script>
  34.    function clearAll(){
  35.          var canv = document.getElementById("canvas-1");
  36.          //paper.setup("canvas-1");
  37.          var path = new paper.Path();
  38.          path.strokeColor = 'black';
  39.          var pointOne     = new paper.Point(100, 20);
  40.          var pointTwo     = new paper.Point(-100, 100);
  41.          var pointThree   = new paper.Point(300, 30);
  42.          path.moveTo(pointOne);
  43.          path.lineTo(pointOne.add(pointTwo));
  44.          path.lineTo(pointTwo.add(pointThree));
  45.          path.lineTo(pointOne.add(pointThree));
  46.          path.closed = true;
  47.          //paper.view.draw();    
  48.          console.log(paper);
  49.          //paper.view.clear();
  50.    }
  51.  
  52. </script>
  53. -->
  54.  
  55. <script type="text/paperscript" canvas="canvas-1">
  56.    
  57.    
  58.     function print(text){
  59.         console.log(text);
  60.     }
  61.    
  62.     var path;
  63.     var items = [];
  64.     var deleted_items = [];
  65.     var strokeColor = 'orange';
  66.     var strokeWidth = '2';
  67.  
  68.     var strokeColor2 = 'red';
  69.     var strokeWidth2 = '20';
  70.  
  71.     var textItem = new PointText({
  72.         content: 'Click and drag to draw a line.',
  73.         point: new Point(20, 30),
  74.         fillColor: strokeColor,
  75.     });
  76.  
  77.     function clearAll(){
  78.         project.activeLayer.removeChildren();
  79.     }
  80.  
  81.  
  82.     function onMouseDown(event) {
  83.         print(event.event.button);
  84.         if (event.event.button == 2){
  85.             sw = strokeWidth2;
  86.             sc = strokeColor2;
  87.         }
  88.         else {
  89.             sw = strokeWidth;
  90.             sc = strokeColor;
  91.         }
  92.         print(sw,sc);
  93.        
  94.         if (path) {
  95.             path.selected = false;
  96.         }
  97.         path = new Path({
  98.             segments: [event.point],
  99.             strokeColor: sc,
  100.             strokeWidth: sw,
  101.             strokeCap:'round',
  102.         });
  103.     }
  104.  
  105.     function onMouseDrag(event) {
  106.         path.add(event.point);
  107.  
  108.     }
  109.  
  110.     function onMouseUp(event) {
  111.         //~ alert(event.count);
  112.         var segmentCount = path.segments.length;
  113.  
  114.         path.simplify(3);
  115.         items[items.length] = path;
  116.         //~ console.log(path);
  117.     }
  118.  
  119.     function onKeyDown(event) {
  120.         if (event.event.ctrlKey && (event.key == "z" || event.key == "я" ) ) {
  121.            if (items.length > 0){
  122.                deleted_items[deleted_items.length] = items[items.length-1];
  123.                 items[items.length-1].visible = false;
  124.                 items.pop();
  125.             }
  126.         }
  127.        
  128.         if (event.event.ctrlKey && event.key == "y") {
  129.            if (deleted_items.length > 0){
  130.                items[items.length] = deleted_items[deleted_items.length-1];
  131.                 items[items.length-1].visible = true;
  132.                 deleted_items.pop();
  133.             }
  134.         }
  135.     }
  136.  
  137.     function change_strokewidth(value){
  138.         strokeWidth = value;
  139.     }
  140.  
  141.     function change_strokecolor(value){
  142.         strokeColor = value;
  143.     }
  144.  
  145.     function change_strokewidth2(value){
  146.         strokeWidth2 = value;
  147.     }
  148.  
  149.     function change_strokecolor2(value){
  150.         strokeColor2 = value;
  151.     }
  152.  
  153.     document.getElementById('clearbutton').onclick = clearAll;
  154.  
  155.     document.getElementById('strokewidth').onchange = function() {
  156.         change_strokewidth(document.getElementById('strokewidth').value);
  157.     }
  158.  
  159.     document.getElementById('strokewidth2').onchange = function() {
  160.         change_strokewidth2(document.getElementById('strokewidth2').value);
  161.     }
  162.    
  163.     var color_list = document.getElementsByName('strokecolor');
  164.     for (var i=0; i<color_list.length;i++){
  165.        color_list[i].onclick = function(){
  166.            change_strokecolor(this.style.backgroundColor);
  167.        }
  168.  
  169.    }
  170.  
  171.    var color_list = document.getElementsByName('strokecolor2');
  172.    for (var i=0; i<color_list.length;i++){
  173.        color_list[i].onclick = function(){
  174.            change_strokecolor2(this.style.backgroundColor);
  175.        }
  176.  
  177.    }
  178.  
  179.    
  180. </script>
  181.  
  182. <script>
  183.     $(document).ready(function() {
  184.         canv = document.getElementById('canvas-1');
  185.         canv.addEventListener('contextmenu', e => {
  186.           e.preventDefault();
  187.         });
  188.     });
  189. </script>
  190.  
  191. </head>
  192. <body>
  193.     <input type="button" value = "clear" id="clearbutton">
  194.     <div>
  195.         leftButton
  196.         <input type="range" value = "2" id="strokewidth" minvalue="1" maxvalue="20">
  197.         <table>
  198.             <tr>
  199.                 <td class = "color_item" name="strokecolor" style="background-color:#ffffff" >&nbsp&nbsp&nbsp</td>
  200.                <td class = "color_item" name="strokecolor" style="background-color:#ffbf00" >&nbsp&nbsp&nbsp</td>
  201.                <td class = "color_item" name="strokecolor" style="background-color:#ffff00" >&nbsp&nbsp&nbsp</td>
  202.                <td class = "color_item" name="strokecolor" style="background-color:#bfff00" >&nbsp&nbsp&nbsp</td>
  203.                <td class = "color_item" name="strokecolor" style="background-color:#80ff00" >&nbsp&nbsp&nbsp</td>
  204.                <td class = "color_item" name="strokecolor" style="background-color:#40ff00" >&nbsp&nbsp&nbsp</td>
  205.                <td class = "color_item" name="strokecolor" style="background-color:#00ff00" >&nbsp&nbsp&nbsp</td>
  206.                <td class = "color_item" name="strokecolor" style="background-color:#00ff40" >&nbsp&nbsp&nbsp</td>
  207.                <td class = "color_item" name="strokecolor" style="background-color:#00ff80" >&nbsp&nbsp&nbsp</td>
  208.                <td class = "color_item" name="strokecolor" style="background-color:#00ffbf" >&nbsp&nbsp&nbsp</td>
  209.                <td class = "color_item" name="strokecolor" style="background-color:#00ffff" >&nbsp&nbsp&nbsp</td>
  210.                <td class = "color_item" name="strokecolor" style="background-color:#00bfff" >&nbsp&nbsp&nbsp</td>
  211.                <td class = "color_item" name="strokecolor" style="background-color:#0080ff" >&nbsp&nbsp&nbsp</td>
  212.                <td class = "color_item" name="strokecolor" style="background-color:#0040ff" >&nbsp&nbsp&nbsp</td>
  213.                <td class = "color_item" name="strokecolor" style="background-color:#0000ff" >&nbsp&nbsp&nbsp</td>
  214.                <td class = "color_item" name="strokecolor" style="background-color:#4000ff" >&nbsp&nbsp&nbsp</td>
  215.                <td class = "color_item" name="strokecolor" style="background-color:#8000ff" >&nbsp&nbsp&nbsp</td>
  216.                <td class = "color_item" name="strokecolor" style="background-color:#bf00ff" >&nbsp&nbsp&nbsp</td>
  217.                <td class = "color_item" name="strokecolor" style="background-color:#ff00ff" >&nbsp&nbsp&nbsp</td>
  218.                <td class = "color_item" name="strokecolor" style="background-color:#ff00bf" >&nbsp&nbsp&nbsp</td>
  219.                <td class = "color_item" name="strokecolor" style="background-color:#ff0080" >&nbsp&nbsp&nbsp</td>
  220.                <td class = "color_item" name="strokecolor" style="background-color:#ff0040" >&nbsp&nbsp&nbsp</td>
  221.                <td class = "color_item" name="strokecolor" style="background-color:#ff0000" >&nbsp&nbsp&nbsp</td>
  222.  
  223.        </table>
  224.    </div>
  225.  
  226.    <div>
  227.        rightButton
  228.        <input type="range" value = "2" id="strokewidth2" minvalue="1" maxvalue="20">
  229.        <table>
  230.            <tr>
  231.                <td class = "color_item" name="strokecolor2" style="background-color:#ffffff" >&nbsp&nbsp&nbsp</td>
  232.                <td class = "color_item" name="strokecolor2" style="background-color:#ffbf00" >&nbsp&nbsp&nbsp</td>
  233.                <td class = "color_item" name="strokecolor2" style="background-color:#ffff00" >&nbsp&nbsp&nbsp</td>
  234.                <td class = "color_item" name="strokecolor2" style="background-color:#bfff00" >&nbsp&nbsp&nbsp</td>
  235.                <td class = "color_item" name="strokecolor2" style="background-color:#80ff00" >&nbsp&nbsp&nbsp</td>
  236.                <td class = "color_item" name="strokecolor2" style="background-color:#40ff00" >&nbsp&nbsp&nbsp</td>
  237.                <td class = "color_item" name="strokecolor2" style="background-color:#00ff00" >&nbsp&nbsp&nbsp</td>
  238.                <td class = "color_item" name="strokecolor2" style="background-color:#00ff40" >&nbsp&nbsp&nbsp</td>
  239.                <td class = "color_item" name="strokecolor2" style="background-color:#00ff80" >&nbsp&nbsp&nbsp</td>
  240.                <td class = "color_item" name="strokecolor2" style="background-color:#00ffbf" >&nbsp&nbsp&nbsp</td>
  241.                <td class = "color_item" name="strokecolor2" style="background-color:#00ffff" >&nbsp&nbsp&nbsp</td>
  242.                <td class = "color_item" name="strokecolor2" style="background-color:#00bfff" >&nbsp&nbsp&nbsp</td>
  243.                <td class = "color_item" name="strokecolor2" style="background-color:#0080ff" >&nbsp&nbsp&nbsp</td>
  244.                <td class = "color_item" name="strokecolor2" style="background-color:#0040ff" >&nbsp&nbsp&nbsp</td>
  245.                <td class = "color_item" name="strokecolor2" style="background-color:#0000ff" >&nbsp&nbsp&nbsp</td>
  246.                <td class = "color_item" name="strokecolor2" style="background-color:#4000ff" >&nbsp&nbsp&nbsp</td>
  247.                <td class = "color_item" name="strokecolor2" style="background-color:#8000ff" >&nbsp&nbsp&nbsp</td>
  248.                <td class = "color_item" name="strokecolor2" style="background-color:#bf00ff" >&nbsp&nbsp&nbsp</td>
  249.                <td class = "color_item" name="strokecolor2" style="background-color:#ff00ff" >&nbsp&nbsp&nbsp</td>
  250.                <td class = "color_item" name="strokecolor2" style="background-color:#ff00bf" >&nbsp&nbsp&nbsp</td>
  251.                <td class = "color_item" name="strokecolor2" style="background-color:#ff0080" >&nbsp&nbsp&nbsp</td>
  252.                <td class = "color_item" name="strokecolor2" style="background-color:#ff0040" >&nbsp&nbsp&nbsp</td>
  253.                <td class = "color_item" name="strokecolor2" style="background-color:#ff0000" >&nbsp&nbsp&nbsp</td>
  254.  
  255.        </table>
  256.    </div>
  257.    
  258.     <canvas id="canvas-1" resize></canvas>
  259. </body>
  260. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!