Question

我需要在选择显示在画布上的图像上绘制一些贝塞尔曲线，但是我不知道该怎么做。我必须选择一条曲线，并且应该将其插入图像。我还可以将曲线拖动到图像中并更改控制点的位置。您可以向谁提供帮助，谢谢。

<!DOCTYPE html>
<html>
<body>
<input type="image" name="selectImage" src="{{ asset('img/open.png') }}" 
onClick="openImageSelection()"><br>

<select id="curvesId" style="width: 80%; color:black">
    <option selected>Select</option>
    <option onclick="curve1()">Curve 1</option>
    <option onclick="curve2()">Curve 2</option>
    <option onclick="curve3()">Curve 3</option>
</select>

<canvas id="myCanvas"></canvas>

<script>

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

function openImageSelection() {
    window.open("{{ route('image.index') }}", "_blank", "width=600, 
    height=400");
}

function openImage(path, loadFunction) {
    img = new Image();
    image_url = path;
    let ctx = document.getElementById('image');
    ctx.setAttribute("onmousedown", "bezier_coordinate(event)");
    if (ctx.getContext) {
        ctx = ctx.getContext('2d');
        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = 785;
        img.onload = function () {
            ctx.drawImage(img, 0, 0, 1050, 785);    //draw background image
            ctx.fillStyle = "rgba(1, 1, 1, 0)"; //draw a box over the top
            if (loadFunction) {
                loadFunction();
            }
        };
    }
    img.src = path;
}

function bezier_coordinate(event) {
    const selectedIndex = document.getElementById("curvesId").selectedIndex;
    const currentCurve = 
    document.getElementById("curvesId").options[selectedIndex].text;
    if (currentCurve === "Selecione") {
        coordenadas(event);
    } else {
        bezier_curve(event, currentCurve);
    }
}

function image(path) {
    global_points = [];
    global_effects = [];
    openImage(path, null);
    reset();
}

function curve1(){
    // Define the points as {x, y}
    let start = { x: 20,    y: 40  };
    let cp1 =   { x: 230,   y: 30  };
    let cp2 =   { x: 150,   y: 80  };
    let end =   { x: 250,   y: 100 };

    // Cubic Bézier curve
    ctx.beginPath();
    ctx.moveTo(start.x, start.y);
    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
    ctx.stroke();

    // Start and end points
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point
    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point
    ctx.fill();

   // Control points
   ctx.fillStyle = 'red';
   ctx.beginPath();
   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one
   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two
   ctx.fill();
}

function curve2(){
    // Define the points as {x, y}
    let start = { x: 50,    y: 20  };
    let cp1 =   { x: 200,   y: 15  };
    let cp2 =   { x: 100,   y: 60  };
    let end =   { x: 250,   y: 100 };

    // Cubic Bézier curve
    ctx.beginPath();
    ctx.moveTo(start.x, start.y);
    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
    ctx.stroke();

    // Start and end points
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point
    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point
    ctx.fill();

   // Control points
   ctx.fillStyle = 'red';
   ctx.beginPath();
   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one
   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two
   ctx.fill();
}

function curve3(){
    // Define the points as {x, y}
    let start = { x: 100,    y: 40  };
    let cp1 =   { x: 230,   y: 60  };
    let cp2 =   { x: 120,   y: 80  };
    let end =   { x: 300,   y: 150 };

    // Cubic Bézier curve
    ctx.beginPath();
    ctx.moveTo(start.x, start.y);
    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
    ctx.stroke();

    // Start and end points
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point
    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point
    ctx.fill();

   // Control points
   ctx.fillStyle = 'red';
   ctx.beginPath();
   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one
   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two
   ctx.fill();
}

</script> 

</body>
</html>

图像选择页面：

<style>
    img {
        height: 100px;
        margin: 5px;
        border: 2px solid #fff;
        cursor: pointer;
    }

img:hover {
    border-color: #EA0404;
}
</style>

@foreach ($images as $image)
    <img src="{{ asset('radiografias/'.$image->path) }}" title="{{'Radiografia '.$image->id}}">
@endforeach

<script>
    var imgs = document.querySelectorAll("img");

    for (var x = 0; x < imgs.length; x++) {
        imgs[x].addEventListener("click", function () {
            window.opener.image(this.src); 
            window.close();
        });
    }
</script>

如何将贝塞尔曲线插入画布上的开放图像中？

0 个答案: