CSS/Javascript：用角上的小矩形標記單擊的形狀-有解無憂

對于一個大學專案，我目前正在嘗試做一種“選擇”——繪制矩形、圓形、線條或三角形等形狀的函式。

相應形狀的“OnClick”事件不應該是問題。但目前我不知道如何以最佳方式處理選擇的可視化。

如果用戶選擇其中一種形狀，則角應顯示小矩形，就像在 Microsoft Word 等中一樣 - 最終結果應如下所示：

CSS/Javascript：用角上的小矩形標記單擊的形狀

但我不知道如何更改繪制形狀的邊框或邊框角以在其末端顯示小矩形。

你能幫幫我嗎？

先感謝您！

var draw_area = document.getElementById('draw_area');


function drawRect(){

  var object = draw_area.getContext('2d');
  object.beginPath();
  object.rect(50, 50, 100, 100);
  object.stroke();

};

function drawLine(){

  var object = draw_area.getContext('2d');
  object.beginPath();
  object.moveTo(230, 100);
  object.lineTo(330, 100);
  object.stroke();

};

function drawTriangle(){

  var object = draw_area.getContext('2d');
  object.beginPath();
  object.moveTo(420, 50);
  object.lineTo(470, 150);
  object.lineTo(370, 150);
  object.lineTo(420, 50);
  object.stroke();

};

function drawCircle(){

  var object = draw_area.getContext('2d');
  object.beginPath();
  object.arc(600, 100, 50, 0, 2 * Math.PI);
  object.stroke(); 

}

drawRect();
drawLine();
drawTriangle();
drawCircle();

#draw_area{
  background-color: lightgrey;
}

<div>
  <canvas id="draw_area" height="700", width="700"> </canvas>
</div>

uj5u.com熱心網友回復：

這是一個 jsfiddle，我在其中畫了一個矩形的角：https ://jsfiddle.net/ahvonenj/u1bqh90v/8/

如果我們看一下 drawRect 函式：

function drawRect(x, y, w, h){
    const cornerSize = 10;
  var object = draw_area.getContext('2d');
  object.beginPath();
  object.rect(x, y, w, h);
  object.closePath();

  object.stroke();
  object.beginPath();
  
  object.fillStyle = "#FFFFFF";
  object.strokeStyle = "#000000";

  
  // Corner rects
  object.rect(
    x - cornerSize / 2,
    y - cornerSize / 2,
    cornerSize, 
    cornerSize
  );
  
  object.rect(
    x   w - cornerSize / 2,
    y - cornerSize / 2,
    cornerSize, 
    cornerSize
  );
  
  object.rect(
    x   w - cornerSize / 2,
    y   h - cornerSize / 2,
    cornerSize, 
    cornerSize
  );
  
  object.rect(
    x - cornerSize / 2,
    y   h - cornerSize / 2,
    cornerSize, 
    cornerSize
  );
  
  object.closePath();
  object.fill();
  object.stroke();

};

這些線用于首先繪制主矩形：

object.beginPath();
object.rect(x, y, w, h);
object.closePath();    
object.stroke();

在這里呼叫 closePath 很重要，這樣畫布才能理解這個矩形是與角矩形分開的東西。

然后我們只需進行一些計算并在正確的位置繪制角矩形，如下所示：

// top-left corner
object.rect(
    x - cornerSize / 2,
    y - cornerSize / 2,
    cornerSize, 
    cornerSize
);

我們使用closePathandfill最后應用頂部的著色規則：

object.fillStyle = "#FFFFFF";
object.strokeStyle = "#000000";

請注意，由于您使用的是純畫布而不是使用諸如 Fabric.js 之類的任何畫布庫，因此您將不得不手動完成所有操作。盡管即使使用庫，您仍可能不得不手動計算每個形狀的小矩形位置。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487928.html

標籤：javascript html css

上一篇：回圈和追加Jquery

下一篇：記憶降低性能并花費更多時間