标签: rectangles

HTML 画布矩形内的阴影效果

背景

我正在使用浏览器 HTML5 canvas 元素。

我有代码（我在网上找到）允许我在画布上绘制一个矩形。

问题

我想在鼠标移动事件触发时应用如图所示的“阴影”效果。如何才能实现这一目标？

当前方法

我当前的方法是在触发 mouseMove 事件处理程序时检查鼠标的 x 和 y 坐标。如果 x 和 y 坐标与原始坐标之间的差值大于某个预定义的增量或与矩形的宽度和高度的比率，我将尝试在 x 和 y 方向上的等距坐标之间绘制直线

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    // get references to the canvas and context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // style the context
    ctx.strokeStyle = "blue";
    ctx.lineWidth=3;

    // calculate where the canvas is on the …

Run Code Online (Sandbox Code Playgroud)

html javascript rectangles html5-canvas

ab_*_*dev

lucky-day

4
推荐指数

1
解决办法

1035
查看次数

如何画一条末端褪色的线？

我正在尝试在 QML 中画一条末端褪色的线，类似于此：

我尝试使用矩形绘制线条，但我不知道如何淡出末端。

我正在使用 Qt 5.12。

qt fade line rectangles qml

Vas*_*ran

2023 10-25

4
推荐指数

1
解决办法

141
查看次数

合并和分割重叠的矩形以产生不重叠的矩形

我正在寻找一个算法如下:

给定一组可能重叠的矩形(所有这些都是"未旋转",可以统一表示为(左,上,右,下)连音符等...),它返回一组最小(非旋转)非重叠的矩形,占据相同的区域.

乍一看似乎很简单,但是很容易变得棘手(至少要有效地完成).

这个/ ideas /指针有一些已知的方法吗？

不一定是最小但是启发式小的集合的方法也很有趣,所以产生任何有效输出集的方法也是如此.

algorithm graphics mathematical-optimization rectangles computational-geometry

uj2*_*uj2

2010 05-16

3
推荐指数

1
解决办法

3747
查看次数

指向矩形内部

我想问这个功能是否正确.它应检查点是否在矩形内部,如果是,则将其打印出来.

#include <stdio.h>
#include <stdlib.h>

typedef struct {
  int x;
  int y;
}point;

typedef struct {
  point A;
  point B;
}rectangle;

int main() {
rectangle s;
point T;
printf("Enter rectangle A point x coordinate :\n" );
scanf("%d", &s.A.x);
printf("Enter rectangle A point y coordinate :\n" );
scanf("%d", &s.A.y);
printf("Enter rectangle B point x coordinate :\n" );
scanf("%d", &s.B.x);
printf("Enter rectangle B point y coordinate :\n" );
scanf("%d", &s.B.y);    
printf("\nrectangle - A(%d, %d), B(%d, %d) \n", s.A.x, s.A.y, s.B.x, s.B.y ); …

Run Code Online (Sandbox Code Playgroud)

c point rectangles

And*_*usK

2012 11-09

3
推荐指数

1
解决办法

562
查看次数

在MonoGame中绘制矩形

如何在MonoGame中绘制形状,例如矩形和圆形,而不必在"内容"文件夹中保存预先绘制的形状？

DrawRectangle()和DrawEllipse()适用于Windows窗体,不适用于我正在使用的OpenGL.

c# geometry rectangles drawrectangle monogame

Evo*_*lor

lucky-day

3
推荐指数

2
解决办法

1万
查看次数

使用MouseMove事件在画布内移动动态绘制的矩形

我正在尝试在画布内移动一个动态绘制的矩形.我能够在画布中动态绘制矩形,同时尝试在画布内移动矩形我遇到问题

XAML:

   <Grid x:Name="Gridimage1" Margin="0,0,411,100">
      <Image Name="image1" HorizontalAlignment="Left" Stretch="Fill" VerticalAlignment="Top"></Image>
        <Canvas x:Name="BackPanel" Margin="20,67,0,0" Height="317" Width="331">
           <Rectangle x:Name="selectionRectangle" Stroke="LightBlue" Fill="#220000FF"/>
        </Canvas>
   </Grid>

Run Code Online (Sandbox Code Playgroud)

C# :

动态绘制矩形后,我正在添加以下鼠标事件.

selectionRectangle.MouseLeftButtonDown += new MouseButtonEventHandler(Rect1_MouseDown);
selectionRectangle.MouseMove += new MouseEventHandler(Rectangle_MouseMove_1);
selectionRectangle.MouseUp += new MouseButtonEventHandler(Rect1_MouseUp); 
     # region "rectangle move"
    private bool drag = false;
    private Point startPt;
    private int wid;
    private int hei;
    private Point lastLoc;
    private double CanvasLeft, CanvasTop;
    private void Rect1_MouseDown(object sender, MouseButtonEventArgs e)
    {
        drag = true;
        Cursor = Cursors.Hand;
        startPt = e.GetPosition(BackPanel);
        wid = (int)selectionRectangle.Width; …

Run Code Online (Sandbox Code Playgroud)

c# wpf canvas rectangles

Jay*_*Jay

2014 12-19

3
推荐指数

1
解决办法

2万
查看次数

如何在OpenLayers中获取绘制框的坐标？

我是OpenLayers的新手,对于一个明显的(也许是愚蠢的)问题感到抱歉,为此我找到了解决方案的不同方法,但都没有工作.试过这个和那个,十几个不同的建议(这里,这里,这里,这里,这里)但是徒劳无功.

基本上,我想将绘制的矩形的坐标传递给另一个Web服务.因此,在绘制矩形后,它应该将我吐出边界框的四个角.

到目前为止我所拥有的是绘制矩形的基本OL图层示例:

    var source = new ol.source.Vector({wrapX: false});


    vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(0, 255, 0, 0.5)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                color: '#ffcc33'
                })
            })
        })      
    });



    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            vector
        ],
        view: new ol.View({
            center: …

Run Code Online (Sandbox Code Playgroud)

rectangles coordinates openlayers-3

luf*_*143

2017 05-23

3
推荐指数

1
解决办法

3027
查看次数

在Python中查找多个重叠矩形的交集区域

我尝试使用此处显示的算法:https://discuss.leetcode.com/topic/15733/my-java-solution-sum-of-areas-overlapped-area

然而,该算法仅涉及找到仅两个重叠矩形的区域.

如果我知道每个矩形的长度和宽度,我将如何继续找到3个,4个或5个等重叠矩形的交叉区域？

python rectangles area

Fal*_*908

2016 08-21

3
推荐指数

1
解决办法

3631
查看次数

带有半径，虚线数组和虚线偏移量的svg矩形

我正在尝试通过使用半径（rx，ry）在svg中创建一个在顶部和底部具有边框/笔触和圆角的矩形。通过使用css属性“ dasharray：width，height”，可以仅使用边框/笔触对顶部和底部进行样式设置。没有半径，则按预期工作。

但是，添加半径后，顶部边框不再从矩形的左上角开始。我试图通过使用css属性dash-offset来纠正此问题，但这似乎会使顶部边框部分消失（尽管它似乎适用于底部边框）。

我们非常感谢您提供有关如何创建一个半径仅为顶部和底部边框的矩形的帮助，以及对正在发生的情况的一些了解。

看到小提琴：https : //jsfiddle.net/Lus8ku7p/

<svg>
  <rect x =10 y=10 id=a ></rect>
  <rect x = 10 y=170 id=b class=round></rect>
  <rect x=170 y=10 id=c ></rect>
  <rect x=170 y=170 id=d class=round></rect>
</svg>
svg{
    width:400px;
    height:400px
}
rect {
   width: 150px;
   height: 150px;
   stroke-width:4px;
   stroke:black;
   fill:red;
   stroke-dasharray: 150 150;
}
.round{
   rx:20px;
   ry:20px;
 }
#c, #d{
   stroke-dashoffset: 40px;
 }

Run Code Online (Sandbox Code Playgroud)

svg rectangles cornerradius stroke-dasharray

joo*_*076

lucky-day

3
推荐指数

1
解决办法

2079
查看次数

如何在Apple Vision框架中拍摄检测到的矩形照片

如何从成功的VNRectangleObservation对象拍摄照片(获取CIImage)？

我有一个视频捕获会话正在运行,func captureOutput(_ output: AVCaptureOutput, didOutput sampleBuffer: CMSampleBuffer, from connection: AVCaptureConnection)我正在处理,即

func captureOutput(_ output: AVCaptureOutput,
                   didOutput sampleBuffer: CMSampleBuffer,
                   from connection: AVCaptureConnection) {
    guard let pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer) else { return }

    do {
        try handler.perform([request], on: pixelBuffer)
    } catch {
        print(error)
    }
}

Run Code Online (Sandbox Code Playgroud)

我应该在哪里保存我传递给处理程序并在该缓冲区上操作的像素缓冲区？遗憾的是,我无法从观察对象访问图像作为属性:(

有任何想法吗？

rectangles computer-vision ios

den*_*631

2018 01-09

3
推荐指数

1
解决办法

2411
查看次数