¿ª³¡°× ËäÈ»ÔÚʵ¼ÊµÄ¿ª·¢ÖÐÎÒÃǺÜÉÙÈ¥»æÖÆÁ÷³Ìͼ ¾ÍËãÐèÒª£¬ÎÒÃÇÒ²»áͨ¹ýµÚ3·½²å¼þȥʵÏÖ ÏÂÃæÎÒÃÇÀ´¼òµ¥ÊµÏÖÁ÷³ÌͼÖкÜСµÄÒ»²¿·Ö ÊÖ¶¯»æÖƾØÐÎ »æÖÆÒ»¸ö¾ØÐεÄ˼· ÎÒÃÇÕâÀï»æÖƾØÐÎ »áʹÓõ½canvas.strokeRect(x,y, w, h)·½·¨»æÖÆÒ»¸öÃè±ß¾ØÐÎ x:¾ØÐÎÆðµãµÄ x Öá×ø±ê¡£ y:
ËäÈ»ÔÚʵ¼ÊµÄ¿ª·¢ÖÐÎÒÃǺÜÉÙÈ¥»æÖÆÁ÷³Ìͼ
¾ÍËãÐèÒª£¬ÎÒÃÇÒ²»áͨ¹ýµÚ3·½²å¼þȥʵÏÖ
ÏÂÃæÎÒÃÇÀ´¼òµ¥ÊµÏÖÁ÷³ÌͼÖкÜСµÄÒ»²¿·Ö
ÊÖ¶¯»æÖƾØÐÎ
ÎÒÃÇÕâÀï»æÖƾØÐÎ
»áʹÓõ½canvas.strokeRect(x,y, w, h)·½·¨»æÖÆÒ»¸öÃè±ß¾ØÐÎ
x:¾ØÐÎÆðµãµÄ x Öá×ø±ê¡£
y:¾ØÐÎÆðµãµÄ y Öá×ø±ê¡£
width:¾ØÐεĿí¶È¡£ÕýÖµÔÚÓұߣ¬¸ºÖµÔÚ×ó±ß¡£
height:¾ØÐεĸ߶ȡ£ÕýֵϽµ£¬¸ºÖµÉÏÉý¡£
×¢ÒâÒ»ÏÂw,hÕâÁ½¸ö²ÎÊýµÄÕýÖ±ºÍ¸ºÖµ¡£
Èç¹ûw,hÊǸºÊý£¬»á³öÏÖÁË2¸öб×ŶԳƵľØÐÎ
Document
ͨ����������ʵ���˾�̬���ƾ��Ρ�
���������Ҫ�ֶ���һ������,��Ҫʵ�����¼�������
1.��canvasע����갴���¼�,�ڰ��µ�ʱ���¼���ε���ʼ����(x,y)
���ͬʱ������Ҫ�ڰ���ʱע������ƶ��¼���̧���¼���
2.������ƶ���ʱ��ͨ������õ����εĿ��͸ߡ�
������εĿ��Ⱥ͸߶�ʱ������Ҫʹ�þ���ֵ���м��㡣
������������ƾ���
3.�����̧��ʱ���Ƴ�֮ǰע�������ƶ��¼���̧���¼�
ͨ����������ͼƬ��������Ȼ�����ֶ����Ƴ��˾��Ρ�
���dz������ظ���·����
�����ȷ���һ�³����ظ�·����Ô��
������ÿ���ƶ��Ĺ����У�������ƾ��Ρ�
ֻҪ�����ڻ���ǰ����վ����Dz��ǾͿ��Խ���������
����������һ��
function drawRect(x1,y1,x2,y2){
// �ڼ�����εĿ���ʱ��������Ҫʹ�þ���ֵ�����м���
// ��ʱ�˿��ƶ��������ȥ������µ�������Ǿ��εĿ��͸�
let rectWidth = Math.abs(x2-x1)
let rectHeight = Math.abs(y2-y1)
// �洢���ε�������Ϣ
rectArr = [x1,y1,rectWidth,rectHeight]
// �ڻ��ƾ���ǰ�����ǽ�������գ�Ȼ���ڻ��ƣ��Ͳ�����ֶ����·����
ctx.clearRect(0,0, canvasEle.width, canvasEle.height)
// ���»��ƾ���
ctx.strokeRect(...rectArr)
}
��Щ���ǵ�С��鷢��:
�������ʼ�������½�,�յ������Ͻǡ�
��:�û���(900, 1000)�϶���(50, 50)�������
���������ķ�����ƾ��Σ��Dz��ǻ���������أ�
ȷʵ��������⡣
��ʱ���Ƶľ��β����������ǵķ�����л��ơ��뿴�����ͼ
��δ�����������أ�
canvas.rect(x,y,w,h)�÷�������һ������·��
x:�������� x �����ꡣ
y:�������� y �����ꡣ
width:���εĿ��ȡ���ֵ���ұߣ���ֵ����ߡ�
height:���εĸ߶ȡ���ֵ�½�����ֵ������
��������Ǵ���һ������·����������·��������ֱ�ӻ����ڻ����ϡ�
��Ҫ����stroke()��fill()������ʾ�ڻ����ϡ�
function drawRect(x1,y1,x2,y2){
let rectWidth = Math.abs(x2-x1)
let rectHeight = Math.abs(y2-y1)
// ����֮ǰ�����֮ǰʵʱ�ƶ������Ķ���ľ���·��
ctx.clearRect(0,0, canvasEle.width, canvasEle.height)
// ��ʼ����
ctx.beginPath();
// ����·������
ctx.rect(Math.min(x1, x2), Math.min(y1, y2), rectWidth, rectHeight);
// ������״��������
ctx.stroke();
}
����1������: canvas.strokeRect:���Ƶ��DZ߿�canvas.rect�������ε�·��(�������������ھ�����)
����2��ʱ��: canvas.strokeRect���������ơ�canvas.rect�����������ƣ���Ҫ����stroke()��fill()���ܻ���
��ͬ�㣺
1.���ǻ��ƾ���
2.���ܵIJ�����ͬ
3.����ͨ��strokeStyle(��ɫ)��lineWidth(�ߵĴ�ϸ)����������ʽ
function drawRect(x1,y1,x2,y2){
let rectWidth = Math.abs(x2-x1)
let rectHeight = Math.abs(y2-y1)
let endX = Math.min(x1, x2)
let endY = Math.min(y1, y2)
// ����֮ǰ�����֮ǰʵʱ�ƶ������Ķ���ľ���·��
ctx.clearRect(0,0, canvasEle.width, canvasEle.height)
// ����֮ǰ��Щ�洢�� beforeRectArr �����еľ���
allRectInfoArr = [endX, endY, rectWidth, rectHeight]
ctx.clearRect(0,0, canvasEle.width, canvasEle.height)
beforeRectArr.forEach(element => {
ctx.beginPath();
ctx.strokeRect(...element)
ctx.stroke();
});
// ��ʼ����·��
ctx.beginPath();
// ���Ʊ��εľ���·��
ctx.rect(...allRectInfoArr);
// ��ʼ������
ctx.stroke();
}
// ���������̧���ʱ��Ҫ�Ƴ�֮ǰע���ƶ��¼���̧���¼�
function canvasMouseUpHandler(){
savaBeforeRect()
canvasEle.removeEventListener('mousemove', canvasMoveHandler)
canvasEle.removeEventListener('mouseup', canvasMouseUpHandler)
}
function savaBeforeRect(){
beforeRectArr.push(allRectInfoArr)
}
Document
���С��������д�IJ����Ļ�
���Ը��ҵ�����𣿸�л�ˡ�
��������д:
���ѡ�о��Σ����ľ��δ�С��
����ھ������������֡�
��λ���Բ����ͷ���ŵ�
ʹ��VSCode�UniApp + TS + Vue3 + Vite��Ŀ
�Ķ�΢�ź���ר���������ý̳�
�Ķ�.NET 9��AI �����µ�ȫ������
�Ķ�����Զ�̹��߷���
�Ķ�һ��һ����PlantUML��ͼ����Ϊ�Զ����ʽ��XMI�ļ�
�Ķ�musl libc �� glibc �� .NET Ӧ�ó����еļ�����
�Ķ���Ӱ����10 Win1+Ubuntu18.04 ˫ϵͳ �ȿӼ�¼
�Ķ����ϼ�Ⱥ�У���δ������ִ���������־��Pod
�Ķ�12��ʥ���ڳ������������
�Ķ�LoRAģ�ͣ�С��Stable Diffusionģ�͵�΢������
�Ķ�WPF�����Ż�֮UI���⻯
�Ķ�����ɣ�Rougamo������ʱAOP������ܼ�IoC/DI��չ
�Ķ�C#�û��ؼ�֮ת������
�Ķ���CentOS 7�ϲ���WebAPI��Ŀ����ϸ����
�Ķ�LOTOʾ����ͳ�����ߺ͹��Ϸ���pass/fail����
�Ķ�Archery����Դ���ݿ����ƽ̨
�Ķ�˼�� V1.5.6 ��׿��
��ս�귨 V7.5.0 ��׿��
У��������������׵������� V1.0 ��׿��
��˸֮�� V1.9.7 ��׿��
������Ե����� v1.0.4 ��׿��
������֮ŠV5.2.3 ��׿��
��������������Դ V1.0 ��׿��
���֮Ϣ V1.0 ��׿��
��ħ������������䣩 V1.0 ��׿��
���ں�������ϵ�����������������վ�����������������Ƽ�����
Ƶ�� ����Ƶ��������ר������������׿�������app����
�Ƽ� ��Ô���������°��������ܿ������ز���
���� ����ɫ������������ ���������ս������������
ɨ��ά�����������ֻ��汾��
ɨ��ά����������΢�Ź��ںţ�
��վ�������������������ϴ��������ַ���İ�Ȩ���뷢�ʼ�[email protected]
��ICP��2022002427��-10 �湫��������43070202000427��© 2013~2024 haote.com ������