Advertisement
fevzi02

ILIYA.html

Jan 10th, 2022
615
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <canvas id="canvas" width="1500" height="800"></canvas><br/>
  2. <input type="checkbox" id="Points">Points<br />
  3. <input type="checkbox" id="Line">Line<br />
  4. <input type="button" onclick="update()" value="Update">
  5.  
  6. <script type="text/javascript">
  7. var coords = [];
  8. var k=0;
  9. var plot = function(x, y, c) { // ”становить пиксель в т. (x, y) с прозрачностью c
  10.     if(isFinite(x) && isFinite(y)){
  11.        var color = {
  12.            r: plot.color.r,
  13.            g: plot.color.g,
  14.            b: plot.color.b,
  15.            a: plot.color.a*c
  16.        };
  17.         setPixel(x,y, color);
  18.     }
  19. };
  20.  
  21. function setPixel (x,y,c) { // функция установки пикселя в js
  22.     c = c||1;
  23.     var p=canva.createImageData(1,1);
  24.     p.data[0]=c.r;
  25.     p.data[1]=c.g;
  26.     p.data[2]=c.b;
  27.     p.data[3]=c.a;
  28.     var data = canva.getImageData(x, y, 1,1).data;
  29.     if(data[3] <= p.data[3])
  30.        canva.putImageData(p,x,y);
  31. }
  32.  
  33. function drawSpline(color) {
  34.    var num = 0;
  35.    for(var i=0; i<2*k; i+=2){
  36.        if(i>0){
  37.             var deltaX = coords[i/2+1].X - coords[i/2].X;
  38.             var deltaY = coords[i/2+1].Y - coords[i/2].Y;
  39.             num += Math.sqrt(deltaX*deltaX+deltaY*deltaY);
  40.         }
  41.     }
  42.     coords[0] = coords[1];
  43.     coords[coords.length] = coords[coords.length-1];
  44.     plot.color = color;
  45.  
  46.     for (var i = 1; i <= coords.length-3; i++)// в цикле по всем четвёркам точек
  47.    {
  48.        var a = [], b = [];
  49.        arrs = {a:a, b:b};
  50.        _SplineCoefficient(i, arrs, coords);// считаем коэффициенты q   `
  51.        var points = {};// создаём массив промежуточных точек
  52.        for(var j=0;j<num;j++)
  53.        {
  54.           var t = j/num;// шаг интерполяции
  55.            // передаём массиву точек значения по методу beta-spline
  56.            points.X = (arrs.a[0] + t * (arrs.a[1] + t * (arrs.a[2] + t * arrs.a[3])));
  57.            points.Y = (arrs.b[0] + t * (arrs.b[1] + t * (arrs.b[2] + t * arrs.b[3])));
  58.            plot(points.X, points.Y,color.a/255);
  59.        }
  60.    }
  61. }
  62. function _SplineCoefficient(i, arrs, coords)// в функции рассчитываютс¤ коэффициенты a0-a3, b0-b3
  63. {
  64. arrs.a[3] = (-coords[i - 1].X + 3*coords[i].X - 3*coords[i + 1].X + coords[i + 2].X)/6;
  65. arrs.a[2] = (coords[i - 1].X - 2*coords[i].X + coords[i + 1].X)/2;
  66. arrs.a[1] = (-coords[i - 1].X + coords[i + 1].X)/2;
  67. arrs.a[0] = (coords[i - 1].X + 4*coords[i].X + coords[i + 1].X)/6;
  68. arrs.b[3] = (-coords[i - 1].Y + 3*coords[i].Y - 3*coords[i + 1].Y + coords[i + 2].Y)/6;
  69. arrs.b[2] = (coords[i - 1].Y - 2*coords[i].Y + coords[i + 1].Y)/2;
  70. arrs.b[1] = (-coords[i - 1].Y + coords[i + 1].Y)/2;
  71. arrs.b[0] = (coords[i - 1].Y + 4*coords[i].Y + coords[i + 1].Y)/6;
  72. }
  73. var canva = document.getElementById("canvas").getContext('2d');
  74. var mouseX,mouseY;
  75. var Line,Points;
  76.  
  77. canvas.onclick = function(event) {
  78.    canva.clearRect(0,0,1500,800);
  79.     Line=document.getElementById('Line').checked;   //проверяем chekbox
  80.     Points=document.getElementById('Points').checked;
  81.     mouseX = event.clientX;     //запоминаем координаты мыши
  82.     mouseY = event.clientY;
  83.     k++;
  84.     coords[k] = {X:mouseX, Y:mouseY};
  85.     if (k>3){
  86.     drawSpline( {r:255, g:0, b:0, a:255}, coords[k-3].X, coords[k-3].Y, coords[k-2].X, coords[k-2].Y, coords[k-1].X, coords[k-1].Y, coords[k].X, coords[k].Y);
  87.     }
  88.         if (Points==true){   //рисуем точки
  89.         for (var i=0;i<coords.length-1;i++){
  90.             canva.beginPath();
  91.             canva.arc(coords[i+1].X,coords[i+1].Y,2,0,2*Math.PI);
  92.             canva.stroke();
  93.             canva.fillStyle="green";
  94.             canva.fill();
  95.         }
  96.     }
  97.     if (Line==true){  //проводим ломанную
  98.         canva.beginPath();
  99.         canva.moveTo(coords[1].X,coords[1].Y);
  100.         for (i=1;i<coords.length-1;i++)  canva.lineTo(coords[i+1].X,coords[i+1].Y);
  101.         canva.stroke();
  102.     }
  103. }
  104.  
  105. function update(){
  106.    canva.clearRect(0,0,1500,800);
  107.     Line=document.getElementById('Line').checked;   //проверяем chekbox
  108.     Points=document.getElementById('Points').checked;
  109.     coords.pop();
  110.     if (k>3){
  111.     drawSpline( {r:255, g:0, b:0, a:255}, coords[k-3].X, coords[k-3].Y, coords[k-2].X, coords[k-2].Y, coords[k-1].X, coords[k-1].Y, coords[k].X, coords[k].Y);
  112.     }
  113.     if (Points==true){   //рисуем точки
  114.         for (var i=0;i<coords.length-1;i++){
  115.             canva.beginPath();
  116.             canva.arc(coords[i+1].X,coords[i+1].Y,2,0,2*Math.PI);
  117.             canva.stroke();
  118.             canva.fillStyle="green";
  119.             canva.fill();
  120.         }
  121.     }
  122.     if (Line==true){  //проводим ломанную
  123.         canva.beginPath();
  124.         canva.moveTo(coords[1].X,coords[1].Y);
  125.         for (i=1;i<coords.length-1;i++)  canva.lineTo(coords[i+1].X,coords[i+1].Y);
  126.         canva.stroke();
  127.     }
  128. }
  129. </script>
  130.  
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement