相关文章推荐
成熟的充电器  ·  篮球——CBA第一阶段:苏州肯帝亚胜福建浔兴 ...·  3 月前    · 
风流倜傥的单杠  ·  燃情开跑,共赴美好!2023上海半程马拉松即 ...·  1 年前    · 
打盹的大熊猫  ·  深化认识创新实践 ...·  1 年前    · 
忐忑的马克杯  ·  美国家地理学会宣布:正式承认南大洋为世界第五 ...·  1 年前    · 
安静的海龟  ·  卡塞米罗真那么厉害?曼联和皇马,因为卡塞米罗 ...·  1 年前    · 
Code  ›  在Fabric js中缩放或更改位置时,Fabric.Path对象的object.path不提供更新路径开发者社区
var js js代码 fabric
https://cloud.tencent.com/developer/ask/sof/107250459
坚强的咖啡豆
1 年前
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
提问

问 在Fabric js中缩放或更改位置时,Fabric.Path对象的object.path不提供更新路径

Stack Overflow用户
提问于 2022-08-30 04:06:00
EN

我正在使用面料js作为我的项目。

我有一个用例,在这个用例中,我希望一个对象沿着其他fabric对象的边界动画。类似于功率点中的运动路径。为了实现这一点,我创建了一个fabric.Path对象,并使用这个路径获取对象的所有边界点,并在这些点上动画对象。代码如下所示。

<script src="./js/fabric.js"></script>
<canvas
  id="c"
  width="500"
  height="500"
  style="border: 1px solid #ccc"
></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script id="main">
  var canvas = new fabric.Canvas("c");
  var circle = new fabric.Circle({
    radius: 30,
    fill: "#f55"
  canvas.add(circle);
  var line = new fabric.Path(
    "M 0 0 L 200 100 L 170 200 z",
      fill: "",
      stroke: "black",
      objectCaching : true
  line.set({ name: "dummy" });
  canvas.add(line);
  var points = getPathValues("M 0 0 L 200 100 L 170 200 z", 1000);
   function getPathValues(path_val, samples) {
    var path = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "path"
    path.setAttribute("d", path_val);
    var points = [];
    var len = path.getTotalLength();
    var step = (step = len / samples);
    for (var i = 0; i <= len; i += step) {
      var p = path.getPointAtLength(i);
      points.push(p.x);
      points.push(p.y);
    return points;
  var i = 0;
  var interval = setInterval(function animate() {
      i = i + 2;
      if (i > points.length) {
        // clearInterval(interval);
        i = 0;
 
推荐文章
成熟的充电器  ·  篮球——CBA第一阶段:苏州肯帝亚胜福建浔兴股份_手机搜狐网
3 月前
风流倜傥的单杠  ·  燃情开跑,共赴美好!2023上海半程马拉松即将鸣枪开跑_国企动态
1 年前
打盹的大熊猫  ·  深化认识创新实践 不断探索媒体融合新路径--传媒--人民网
1 年前
忐忑的马克杯  ·  美国家地理学会宣布:正式承认南大洋为世界第五大洋-中新网
1 年前
安静的海龟  ·  卡塞米罗真那么厉害?曼联和皇马,因为卡塞米罗,都脱胎换骨
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号