精华内容
下载资源
问答
  • I found images that depict what is my problem:User will able to choose four points on canvas to crop the part of image and than stretch it.How to do that in HTML5? drawImage function (as I know) works...

    I found images that depict what is my problem:

    d2fb8cd6398ae316a9f2979ff91923fc.png

    f9953238e1d5e2537c3862d96785afad.png

    User will able to choose four points on canvas to crop the part of image and than stretch it.

    How to do that in HTML5? drawImage function (as I know) works only with rectangles (takes x, y, width and height values) so I can't use irregular shape. The solution have to work in every modern browser, so I don't want things based on webgl or something.

    EDIT:

    More info: this will be app for editing pictures. I want to let user cut some part of bigger picture and edit that. It will be similar to Paint, so canvas is required to edit pixels.

    解决方案

    So here's a killing trick : You can use the regular drawImage of the context2d to draw a texture inside a triangle.

    The constraint is that the texture coordinates must be axis-aligned.

    To draw a textured triangle you have to :

    • Compute by yourself the transform required to draw the image.

    • Clip to a triangle, since drawImage would draw a quad.

    • drawImage with the right transform.

    So the idea is to split your quad into two triangles, and render both.

    But there's one more trick : when drawing the lower-right triangle, texture reading should start from the lower-right part of the texture, then move up and left. This can't be done in Firefox, which accepts only positive arguments to drawImage. So i compute the 'mirror' of the first point vs the two others, and i can draw in the regular direction again -the clipping will ensure only right part is drawn-.

    fiddle is here :

    ed29a0074eda131c7b041d831d20b846.png

    function rasterizeTriangle(v1, v2, v3, mirror) {

    var fv1 = {

    x: 0,

    y: 0,

    u: 0,

    v: 0

    };

    fv1.x = v1.x;

    fv1.y = v1.y;

    fv1.u = v1.u;

    fv1.v = v1.v;

    ctx.save();

    // Clip to draw only the triangle

    ctx.beginPath();

    ctx.moveTo(v1.x, v1.y);

    ctx.lineTo(v2.x, v2.y);

    ctx.lineTo(v3.x, v3.y);

    ctx.clip();

    // compute mirror point and flip texture coordinates for lower-right triangle

    if (mirror) {

    fv1.x = fv1.x + (v3.x - v1.x) + (v2.x - v1.x);

    fv1.y = fv1.y + (v3.y - v1.y) + (v2.y - v1.y);

    fv1.u = v3.u;

    fv1.v = v2.v;

    }

    //

    var angleX = Math.atan2(v2.y - fv1.y, v2.x - fv1.x);

    var angleY = Math.atan2(v3.y - fv1.y, v3.x - fv1.x);

    var scaleX = lengthP(fv1, v2);

    var scaleY = lengthP(fv1, v3);

    var cos = Math.cos,

    sin = Math.sin;

    // ----------------------------------------

    // Transforms

    // ----------------------------------------

    // projection matrix (world relative to center => screen)

    var transfMatrix = [];

    transfMatrix[0] = cos(angleX) * scaleX;

    transfMatrix[1] = sin(angleX) * scaleX;

    transfMatrix[2] = cos(angleY) * scaleY;

    transfMatrix[3] = sin(angleY) * scaleY;

    transfMatrix[4] = fv1.x;

    transfMatrix[5] = fv1.y;

    ctx.setTransform.apply(ctx, transfMatrix);

    // !! draw !!

    ctx.drawImage(bunny, fv1.u, fv1.v, v2.u - fv1.u, v3.v - fv1.v,

    0, 0, 1, 1);

    //

    ctx.restore();

    };

    Edit : i added the relevant comment of @szym , with his example picture :

    This only sort of looks right. If there are any straight lines in the

    original image you will see that each triangle is warped differently

    (2 different affine transforms rather than a perspective transform).

    39bb0d6d5012b63048105a5093c9aab2.png

    展开全文
  • 一般在我们用html写出来的div都是方形的div,如果我们要写不规则的div要...css设置不规则div的方法示例:1、设置圆形的div 代码展示:.div1{width: 100px;height: 100px;background: red;border-radius: 50%;te...

    一般在我们用html写出来的div都是方形的div,如果我们要写不规则的div要怎么办呢?我们可以使用css3的transparent或者border-radius或者transform来实现。

    6a47f9c6d0dd5fd839fe1047d52ba5fa.png

    css设置不规则div的方法示例:

    1、设置圆形的div 代码展示:

    .div1{

    width: 100px;

    height: 100px;

    background: red;

    border-radius: 50%;

    text-align: center;

    }

    圆形

    效果图:

    9580d270af122468ed7502145deb7641.png

    般情况下我们可以通过border-radius来改变div的圆角弧度,设置的值可以是像素或者是百分比,但是两者也存在细微的差别。当设置的圆角弧度的像素值大于50px或者50%时,div就会变成圆形。

    2、设置椭圆形的div 代码展示:

    .div1{

    width: 200px;

    height: 100px;

    background: red;

    border-radius:100px/50px;

    text-align: center;

    }

    椭圆形

    效果图:

    0b28464633735c57c29310364459cea1.png

    4、菱形 代码展示:

    .div1{

    width: 100px;

    height: 100px;

    background: red;

    text-align: center;

    transform: rotate(45deg);

    margin:100px;

    }

    效果图:

    f55f282ee3e343ded366a0a591fd6a27.png

    transform中的rotate属性用于设置元素的旋转,rotate(45deg)表示将元素旋转45度。

    展开全文
  • [html] 制作一个不规则形状有哪些方法可以实现? canvas 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...

    [html] 制作一个不规则形状有哪些方法可以实现?

    canvas
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。欢迎大家一起讨论

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • 如何实现不规则的Div外部形状

    千次阅读 2018-09-03 20:22:38
    如何实现不规则的Div外部形状? 一般在我们用html写出来的div都是方形的div,如果我们要写不规则的div要怎么办呢?我们可以使用css3的transparent或者border-radius或者transform来实现。 1、设置圆形的div 代码...

    如何实现不规则的Div外部形状?
    一般在我们用html写出来的div都是方形的div,如果我们要写不规则的div要怎么办呢?我们可以使用css3的transparent或者border-radius或者transform来实现。
    1、设置圆形的div 代码展示:

    <style>
    .div1{
        width: 100px;
        height: 100px;
        background: red;
        border-radius: 50%;
        text-align: center;
    }
    </style>
    <script type="text/javascript"></script>
    </head>
    <body>
        <div class="div1">圆形</div>
    </body>

    注:一般情况下我们可以通过border-radius来改变div的圆角弧度,设置的值可以是像素或者是百分比,但是两者也存在细微的差别。当设置的圆角弧度的像素值大于50px或者50%时,div就会变成圆形。
    2、设置椭圆形的div 代码展示:

    <style>
    .div1{
        width: 200px;
        height: 100px;
        background: red;
        border-radius:100px/50px;
        text-align: center;
    }
    </style>
    <script type="text/javascript"></script>
    </head>
    <body>
        <div class="div1">椭圆形</div>
    </body>

    注:需要将宽度设置为高度的两倍,圆角弧度设置方式也要有相对的变化,100px/50px表示的是分别设置水平方向的弧度和竖直方向的弧度值。
    3、三角形 代码展示:

    <style>
    .div1{
        width: 0px;
        height: 0px;
        text-align: center;
        border-top: 100px solid transparent;
        border-bottom: 100px solid pink;
        border-right:100px solid transparent;
        border-left:100px solid transparent;
    }
    .div2{
        width: 0px;
        height: 0px;
        text-align: center;
        border-top: 100px solid skyblue;
        border-bottom: 100px solid pink;
        border-right:100px solid lightgreen;
        border-left:100px solid yellow;
        margin-top: 20px;
    }
    </style>
    <script type="text/javascript"></script>
    </head>
    <body>
        <div class="div1">三角形</div>
        <div class="div2"></div>
    </body>

    注:在设置的时候我们需要将div的高度和宽度设置为0;用border来将div撑起来,div2展示的就是border撑起来之后的div的样式。当我们设置好div的border之后,将某些border设置为transparent(透明),但是border的值不为0哦,这样就可以设置出一个三角形来了,如div1。
    4、菱形 代码展示:

    <style>
    .div1{
        width: 100px;
        height: 100px;
        background: red;
        text-align: center;
        transform: rotate(45deg);
        margin:100px;
    }
    </style>
    <script type="text/javascript"></script>
    </head>
    <body>
        <div class="div1"></div>
    </body>

    注:transform中的rotate属性用于设置元素的旋转,rotate(45deg)表示将元素旋转45度。
    5、设置梯形 代码展示:

    <style>
    .div1{
        width:150px ;
        height: 0px;
        text-align: center;
        /*border-top:100px solid transparent;*/
        border-bottom:100px solid yellow;
        border-left:100px solid transparent;
        border-right:100px solid transparent;
    }
    </style>
    <script type="text/javascript"></script>
    </head>
    <body>
        <div class="div1">梯形</div>
    </body>

    注:左右的border的宽度决定了梯形的宽度,底部的border的大小决定梯形的高度。
    5、六边形 代码展示:

    <style>
    .div1{
        width: 0px;
        height: 0px;
        border-bottom: 70px solid pink;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        text-align: center;
    }
    .div2{
        width:200px;
        height: 100px;
        background: pink;
        text-align: center;
    }
    .div3{
        width: 0px;
        height: 0px;
        border-top: 70px solid pink;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        text-align: center;
    }
    </style>
    <script type="text/javascript"></script>
    </head>
    <body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    </body>

    注:六边形是由三个div拼接而成,需要两个三角形和一个长方形来拼接。
    7、鸡蛋形 代码展示:

    <style>
    .div1{
        width: 100px;
        height: 150px;
        background: pink;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        text-align: center;
    }
    
    </style>
    <script type="text/javascript"></script>
    </head>
    <body>
    <div class="div1">鸡蛋</div>
    </body>

    注:border-radius的值百分号前设置的是水平方向上的弧度值即为上下边,百分号后设置的是竖直方向上的弧度值即为左右边。
    8、消息框形状 代码展示:

    <style>
    .div1{
        width: 0px;
        height: 0px;
        border-top:20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left:20px solid transparent;
        border-right:30px solid skyblue;
        margin: 50px 0 0 50px;
        float: left;
    }
    .div2{
        width: 200px;
        height: 100px;
        background: skyblue;
        border-radius: 10px;
        float: left;
        margin-top: 30px;
    }
    </style>
    <script type="text/javascript"></script>
    </head>
    <body>
    <div class="div1"></div>
    <div class="div2"></div>
    </body>

    注:这个形状也需要div拼接来实现,同时需要定位三角形的位置,用transform来设置三角形的旋转,某些情况也可以不用设置。
    9、上述代码图片效果:
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    展开全文
  • Problem Description The goal of this problem is to write a program which will take from 1 to 5 puzzle pieces such as those shown below and arrange them, if possible, to form a square....
  • 轮廓跟踪算法,里面详细的讲解了算法的原理,并通过分析具体的例子来进一步的讲解该算法的具体步骤。个人感觉这个作者写的不错,容易看到。
  • [html] 制作一个不规则形状有哪些方法可以实现? 各种形状的实现,border-top border-right border-bottom border-left https://www.cnblogs.com/liangxiaofeng/p/5936760.html [css] 使用css实现闪光的霓虹灯...
  • 由于图形不规则且可能是由多个元素拼接而成的,这样box-shadow属性可能不能满足需求。这里推荐一个类似的属性,filter下的drop-shadow。 <div class="triangle"> </div> .triangle{ width: 200px; ...
  • 前端优化的14条规则

    2018-09-02 22:34:11
    前端性能优化的14个规则 作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了《高性能网站建设指南》一书,对作者提出的前端性能优化的14个规则...
  • 该协议使用简单的纯文本格式。请求的类型有GET、POST、HEAD、PUT、DELETE、OPTIONS和TRACE。...前端性能优化十四个规则:1. 减少HTTP请求。a. 至少80%的最终用户响应时间花在了页面中的组件(图片、脚本、样式表、Fl
  • 前端性能优化的14个规则

    千次阅读 2013-11-27 20:43:00
    作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了《高性能网站建设指南》一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更...
  • 前端性能优化十四个规则: HTTP是一种客户端/服务器协议,由请求和响应构成。浏览器向一个特定的URL发送HTTP请求,URL对应的宿主服务器发回HTTP响应。该协议使用简单的纯文本格式。请求的...
  • 规则01:尽量减少HTTP请求 前端优化的黄金准则指导着前端页面的优化策略:只有10%-20%的最终用户响应时间花在接受请求的HTML文档上,...当然很多人就会说,既然这样,那我们就减少页面组件的数量就OK了吗?那你...
  • 链接参考: https://developer.yahoo.com/performance/rules.html 只有10%~20%的最终用户响应时间花在了下载HTML文档上,其余的80%~90%时间花在了下载页面中的所有组件上。 ——Steve Souders ...规则1
  • 前端

    2020-11-05 22:57:52
    前端 资源 静态资源 使用三大件开发的,HTML+CSS+JS 所有人看到的是一样的, 如果用户请求静态资源,那么服务器直接发送给浏览器,浏览器内置了静态资源的解析引擎用于展示 动态资源 每个人看到的一样 技术如:...
  • 不规则图形点击事件的识别 更好

    千次阅读 2016-05-21 17:38:46
    ...最近要在iPad上实现一个很独特的功能,...问题是UED/美工不会提供纯粹的不规则形状切图,实际只能给出的是以不规则形状加透明区域的矩形切图,这就带来另外一个要求:点击矩形切图的透明区域也要退出弹出界

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,094
精华内容 2,037
关键字:

不规则形状前端