javascript - 具有控制点的 Canvas 形状-6ren

javascript - 具有控制点的 Canvas 形状

转载作者：行者123 更新时间：2023-12-03 12:05:51

我在kinetic js中制作了一个贝塞尔形状，其顶点上有控制点。该代码允许用户拖动起点、终点和控制点，从而修改曲线的形状，如下所示。

Anchor points

包含上述代码的js fiddle的链接是http://jsfiddle.net/Lucy1/da90vct4/2/

anchor 的代码是

 var room = new Kinetic.Shape({
x: 0,
y: 0,
width: 100,
height: 100,
stroke: "black",
fill: 'ivory',
drawFunc: function (context) {
    var x = this.x();
    var y = this.y();
    var w = this.width();
    var h = this.height();
    var trX = anchorTR.x();
    var trY = anchorTR.y();
    var brX = anchorBR.x();
    var brY = anchorBR.y();
    var blX = anchorBL.x();
    var blY = anchorBL.y();
    var tlX = anchorTL.x();
    var tlY = anchorTL.y();
    context.beginPath();
    context.moveTo(tlX, tlY);
    // top
    context.bezierCurveTo(x + w / 3, y, x + w * 2 / 3, y, trX, trY);
    // right
    context.bezierCurveTo(x + w, y + h / 3, x + w, y + h * 2 / 3, brX, brY);
    // bottom
    context.bezierCurveTo(x + w * 2 / 3, y + h, x + w / 3, y + h, blX, blY);
    // left
    context.bezierCurveTo(x, y + h * 2 / 3, x, y + h / 3, tlX, tlY);

    context.closePath();
    context.fillStrokeShape(this);
    }
    });

    g.add(room);


   var anchorTR = new Kinetic.Circle({
   x: 100,
   y: 0,
   radius: 8,
   fill: "green",
   stroke: 'black',
   strokeWidth: 1,
   draggable: true
   });
   g.add(anchorTR);

 var anchorBR = new Kinetic.Circle({
x: 100,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBR);

var anchorBL = new Kinetic.Circle({
x: 0,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBL);

var anchorTL = new Kinetic.Circle({
x: 0,
y: 0,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorTL);

layer.draw();

目前，我正在为 anchor 定义多个动力学圆，并为定位 anchor 定义多个变量。我正在尝试以这样的方式优化代码，以便我可以多次重用代码，而不使用循环，但不能够..请帮忙..

最佳答案

您可以通过将代码封装到函数中并添加一些引用来使代码可重用。

将创建群组和房间的代码放入函数中，并从该函数返回新房间。
将创建 anchor 的代码放入函数中，并从该函数返回新的 anchor 。
将对房间 anchor 的引用附加到房间节点本身。

enter image description here

这里是代码的重构和Demo:http://jsfiddle.net/m1erickson/opsy1pn9/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var room1=makeRoom(50,50,50,50);
    var room2=makeRoom(150,150,50,50);


    function makeRoom(x,y,w,h){

        var g=new Kinetic.Group({x:x,y:y,draggable:true});
        layer.add(g);

        var room=new Kinetic.Shape({
          x:0,
          y:0,
          width:w,
          height:h,
          stroke:"blue",
          fill: 'red',
          drawFunc: function(context) {
            var x=this.x();
            var y=this.y();
            var w=this.width();
            var h=this.height();
            var tlX=this.anchorTL.x();
            var tlY=this.anchorTL.y();
            context.beginPath();
            context.moveTo(tlX,tlY);
            // top
            context.bezierCurveTo(x+w/3,y, x+w*2/3,y, this.anchorTR.x(),this.anchorTR.y());
            // right
            context.bezierCurveTo(x+w,y+h/3, x+w,y+h*2/3, this.anchorBR.x(),this.anchorBR.y());
            // bottom
            context.bezierCurveTo(x+w*2/3,y+h, x+w/3,y+h, this.anchorBL.x(),this.anchorBL.y());
            // left
            context.bezierCurveTo(x,y+h*2/3, x,y+h/3, tlX,tlY);

            context.closePath();
            context.fillStrokeShape(this);
          }
        });

        g.add(room);

        room.anchorTR=makeAnchor(w,0,g);
        room.anchorBR=makeAnchor(w,h,g);
        room.anchorBL=makeAnchor(0,h,g);
        room.anchorTL=makeAnchor(0,0,g);

        layer.draw();
    }

    function makeAnchor(x,y,group){
        var anchor=new Kinetic.Circle({
            x:x,
            y:y,
            radius:8,
            fill:"green",
            stroke: 'black',
            strokeWidth: 1,
            draggable: true
        });
        group.add(anchor);
        anchor.moveToTop();
        return(anchor);
    }

}); // end $(function(){});
</script>       
</head>
<body>
    <h4>Drag green circle to change red rect</h4>
    <div id="container"></div>
</body>
</html>

关于javascript - 具有控制点的 Canvas 形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25198336/

文章推荐： javascript - JS/CoffeeScript : Element doesn't receive focus on . 焦点()

文章推荐： .net - 在.NET中完成异步HttpWebRequests时，超时从何而来？

文章推荐： image - 如何在VB6中读取图像文件流的结尾

ios - 快速更新 addQuadCurve 控制点？
有没有办法动态调整贝塞尔路径四曲线的控制点？我正在为 children 创建一个小型拖放绘图应用程序。我希望他们在 Canvas 上添加一条线，然后通过拖动手指来调整曲线点以创建微笑或皱眉。我目前
java - UPNP/DLNA 控制点
我正在开发一款安卓 UPnP/DLNA 应用程序。我有一个控制点，我可以在其中将文件从媒体服务器流式传输到渲染器。我可以在播放期间暂停/播放和停止文件，但我似乎无法弄清楚如何将搜索栏集成到控制点中以显
r - 如何在 ggplot 中找到 geom_line 控制点
我能够使用这个问题的答案在 ggplot 中找到 geom_curve 控制点: How to find the geom_curve control points in ggplot 我现在想知道如
firebase - 控制点 : Best approach for sending scheduled notification
我正在开发一个类似提醒的应用程序，需要在特定时间发送通知。基本上，用户会创建某种提醒，我需要在指定时间发送通知。我正在使用 Firebase Cloud Messaging 发送通知。我现在的想法是
firebase - 控制点 : Best approach for sending scheduled notification
我正在开发一个类似提醒的应用程序，需要在特定时间发送通知。基本上，用户会创建某种提醒，我需要在指定时间发送通知。我正在使用 Firebase Cloud Messaging 发送通知。我现在的想法是
node.js - 控制点 : Configurations on app service's versions
我一直在搜索 gcloud 文档和网络，但找不到为 gcloud 应用服务版本设置配置的方法。在我的其他项目中已经完成，但我忘记了如何再次更新它。我想做的是对单个服务设置最大版本限制 - 例如: 使
objective-c - CAMediaTimingFunction 具有 3 个 {0.0f} 控制点？
我正在尝试为一些 NSView 的 alpha 过渡设置动画。它需要在另一个动画期间发生，特别是它的 super View (边界更改)。解释原因有点复杂，但我需要这些 alpha 转换具有计时功能，
google-cloud-platform - 控制点 : instance listed via gcloud command but not described
以下怎么可能？ ➢ gcloud compute instances list NAME ZONE
google-cloud-platform - 控制点 : instance listed via gcloud command but not described
以下怎么可能？ ➢ gcloud compute instances list NAME ZONE
google-cloud-platform - 控制点 : Can we modify primary key of an existing table in spanner
我想将 Spanner 中现有表的主键从 Col1 修改为 Col1 和 Col2 的组合。可以在 Spanner 中实现吗？此选项在控制台中不可用。也许可以用脚本来完成! 最佳答案 The key
java - 使用 CyberGarage CyberLink for Java 的 Android 简单 UPnP/DLNA 控制点
我想使用 CyberGarage“CyberLink for Java”API 为 Android 编写一个 UPnP 控制点应用程序。为了测试 API，我实现了一个非常简单的应用程序。在此应

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 具有控制点的 Canvas 形状