javascript - 在 Canvas 中移动元素会多次复制它，直到打开开发人员的控制台-6ren

javascript - 在 Canvas 中移动元素会多次复制它，直到打开开发人员的控制台

转载作者：行者123 更新时间：2023-12-04 10:21:18

我想要实现的是为 Canvas 加载背景图像，然后创建和移动形状。由于我想稍后扩展此功能，因此我使用了 paper.js (0.12.4)，它带有很多示例和方便的工具。

总而言之，我能够做到这一点，但我需要采取额外的步骤开业浏览器控制台或 放大和缩小 (Firefox 74；Chrome 80.0.3987.149)。就在这时，一切都按计划进行。请看下面的GIF。

这是上面演示的代码:

<!DOCTYPE html>
<html lang="en">
    <head >
        <title></title>

        <!-- Load Bootstrap and JQuery -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div id="main">
            <div>
                <canvas id="myCanvas" resize></canvas>
            </div>
        </div>

        <script type="text/paperscript" canvas="myCanvas">

            var hitOptions = {
                segments: true,
                stroke: true,
                fill: true,
                tolerance: 5
            };

            var segment, path;
            var movePath = false;
            function onMouseDown(event) {
                segment = path = null;
                var hitResult = project.hitTest(event.point, hitOptions);
                if (!hitResult)
                    return;

                if (event.modifiers.shift) {
                    if (hitResult.type == 'segment') {
                        hitResult.segment.remove();
                    };
                    return;
                }

                if (hitResult) {
                    path = hitResult.item;
                    if (hitResult.type == 'segment') {
                        segment = hitResult.segment;
                    } else if (hitResult.type == 'stroke') {
                        var location = hitResult.location;
                        segment = path.insert(location.index + 1, event.point);
                    }
                }
                movePath = hitResult.type == 'fill';
                if (movePath)
                    project.activeLayer.addChild(hitResult.item);
            }

            function onMouseDrag(event) {
                if (segment) {
                    segment.point += event.delta;
                } else if (path) {
                    path.position += event.delta;
                }
                logCanvasData();
            }

            function logCanvasData() {
                var c = document.getElementById('myCanvas');
                var ctx = c.getContext('2d');
                var imgData = ctx.getImageData(0, 0, c.width, c.height);

                for (var i = 0; i < 120; i += 4) {
                    if (imgData.data[i] == 255) {
                        console.log("We have a color with red inside.");

                    } else if (imgData.data[i] == 0 && imgData.data[i+1] == 0 && imgData.data[i+2] == 0 && imgData.data[i+3] != 0){
                        console.log("We have a black value!");
                    }
                }
            }

            function onResize(event) {
                // Whenever the window is resized, recenter the path:
                path.position = view.center;
            }
        </script>

        <script>
            window.onload = function() {
                // Loads the canvas element with a background image
                // and an example polygon.
                loadCanvas();
            }
        </script>
        <script>
            function loadCanvas(imageUrl, canvasId) {

                if (typeof imageUrl == "undefined") {
                    imageUrl = "teddy_bear.jpg";
                }

                if (typeof canvasId == "undefined") {
                    canvasId = "myCanvas";
                }

                canvasImageWidth = 0;
                canvasImageHeight = 0;
                var canvasImage = new Image();
                canvasImage.onload = function() {
                    // Determine the image size which will be the background of the canvas.
                    canvasImageWidth = this.width;
                    canvasImageHeight = this.height;

                    // Adjust the canvas size and set the background image.
                    var canvasElement = document.getElementById(canvasId);
                    canvasElement.width = canvasImageWidth;
                    canvasElement.height = canvasImageHeight;
                    canvasElement.style.background = "url(" + canvasImage.src + ")";

                    myPath = new paper.Path();
                    myPath.closed = true;

                    myPath.strokeColor = 'black';
                    myPath.fillColor = {hue:180, saturation:30, lightness:100}
                    myPath.add(new paper.Point(0, 0));
                    myPath.add(new paper.Point(100, 50));
                    myPath.add(new paper.Point(50, 150));
                    myPath.opacity = 0.3;

                };

                canvasImage.src = imageUrl;
            }
        </script>

        <!-- Load script to draw polygons -->
        <script src="paperjs-v0.12.4/dist/paper-full.js"></script>
    </body>
</html>

我相信这个问题是有解决办法的。任何建议表示赞赏。

可能的解决方案:

正如 sasensi 在他回复下方的评论中的 fiddle 所示:sfiddle.net/xidi2xidi/v67odmjy

另一种有效的方式，但取决于您如何加载网站和图像，如下所示。在我的情况下，图像信息由 python Flask 后端传递，以便我可以将它们添加为 Canvas 的样式参数。

<style>
  canvas[resize] {
    width: {{ imageWidth }}px;
    height: {{ imageHeight }}px;
    background-image: url("{{ imagePath }}");
  }
</style>

最佳答案

依靠 Paper.js 是个好主意，因为它可以为您完成很多工作。
事实上，你也应该用它来绘制你的背景，一切都会简单得多。

这是一个 sketch演示解决方案。

// Draw an image as background.
const raster = new Raster({
    source: 'http://assets.paperjs.org/images/marilyn.jpg',
    // Lower down the opacity so we can see the rest better.
    opacity: 0.4,
    // When image is loaded...
    onLoad: () => {
        // ...make sure that it fills the entire canvas.
        raster.fitBounds(view.bounds, true);
    }
});

// Draw a circle on top of the image.
const circle = new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange',
    // On circle drag...
    onMouseDrag: event => {
        // ...move it.
        circle.position += event.delta;
    }
});

// Draw intsructions.
new PointText({
    content: 'Drag and drop the circle over the image',
    point: view.center + [0, -80],
    justification: 'center',
    fontSize: 24
});

关于javascript - 在 Canvas 中移动元素会多次复制它，直到打开开发人员的控制台，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60834992/

文章推荐：安卓 : Call a Fragment Method from a service

iphone - 复制(复制)核心数据记录和相关记录
我正在编写一个应用程序，允许用户创建一个“问卷”，然后向其中添加问题。我正在使用核心数据来存储信息。我创建了一个问卷实体，并与问题实体建立了“一对多”关系。我的问题是，如果要允许用户复制(复制)整个调
Android:复制/复制 SharedPreferences
有没有办法复制或复制 SharedPreference？或者我需要从一个变量中获取每个变量，然后将它们放入另一个变量中吗？最佳答案尝试这样的事情: //sp1 is the shared pref
objective-c - @property(复制)与方法[复制]
下面的(A)和(B)有区别吗？ (假设 NON ARC，如果重要的话) // --- (A) --- @interface Zoo : NSObject{} @property (copy) Dog
php - 复制/复制/克隆 mysql_result 对象
我正在尝试将 mysql SELECT 查询保存到文件中，如下所示: $result = mysqli_query($db,$sql); $out = fopen('tmp/csv.csv', 'w'
ios - 使用 CVPixelBufferCreate 复制/复制 CVPixelBufferRef
我需要创建一个 CVPixelBufferRef 的副本，以便能够使用副本中的值以按位方式操作原始像素缓冲区。我似乎无法使用 CVPixelBufferCreate 或 CVPixelBufferCr
c# - 使用 Naudio 复制 Wave 文件 - 复制/附加最新的可用字节
我在 Source 文件夹中有一个 Active wave 录音 wave-file.wav。我需要使用新名称 wave-file-copy.wav 将此文件复制到 Destination 文件夹。
autotools - 文件由 `make dist` 复制，但未由 `make distcheck` 复制
在使用 GNU Autotools 构建的项目中，我有一个脚本需要通过 make 修改以包含安装路径。这是一个小例子: configure.ac: AC_INIT(foobar, 1.0) AC_PR
mysql - 使用 blob/text 复制/复制 SQL 行，怎么做？
我想将 SQL 的行复制到同一个表中。但是在我的表中，我有一个“文本”列。使用此 SQL: CREATE TEMPORARY TABLE produit2 ENGINE=MEMORY SELECT
python Pandas DataFrame 复制(deep=False)vs 复制(deep=True)vs '='
谁能给我解释一下 df2 = df1 df2 = df1.copy() df3 = df1.copy(deep=False) 我已经尝试了所有选项并执行了以下操作: df1 = pd.DataFram
Hazelcast 复制？
Hazelcast 是否具有类似于 Ehcache 的复制？ http://www.ehcache.org/generated/2.9.0/pdf/Ehcache_Replication_Guide.
MySQL远程连接(复制)
我有以下拓扑。一个 Ubuntu 16.04。运行我的全局 MySQL 服务器的 Amazon AWS 上的实例。我想将此服务器用作许多本地主服务器(Windows 机器 MySQL 服务器)的从服务
MySQL 复制
使用 SQLyog，我正在测试表中是否设置了正确的值。我尝试过 SELECT type_service FROM service WHERE email='test@gmail.com' 因此，只输出
Elasticsearch 复制
有人可以提供一些关于如何配置 ElasticSearch 进行复制的说明。我在 Windows 中运行 ES，并且了解如果我在同一台服务器上多次运行 bat 文件，则会启动一个单独的 ES 实例，并且
复制 Thread 数组
一点睛 ThreadGroup 复制线程的两个方法。 public int enumerate(Thread list[]) // 会将 ThreadGroup 中的 active 线程全部复制到
复制 ThreadGroup 数组
一点睛 ThreadGroup 复制线程组的两个方法。 public int enumerate(ThreadGroup list[]) // 相对于 enumerate（list,true） pu
添加新数据中心时用于系统模式的 Cassandra 复制
官方documentation Cassandra 说: Configure the keyspace and create the new datacenter: Use ALTER KEYSPAC
r - 如何在ggplot2中绘制加权黄土平滑度？ [复制]
This question already has answers here: How to weight smoothing by arbitrary factor in ggplot2? (2个答
excel - 复制/导出多列
我们有一个表格来表明对各种俱乐部的兴趣。输出将数据记录在 Excel 电子表格中，其中列有他们的首选姓名、姓氏、电子邮件、代词，以及他们感兴趣的俱乐部的相应列中的“1”(下面的模型)。我们希望为俱乐
vim - 如何使Vim带您回到上次编辑文件时的状态？ [复制]
This question already has answers here: Closed 8 years ago. Possible Duplicate: In vim, how do I get
vba - 复制/粘贴具有形状的单元格
如何复制形状及其所在的单元格？当我手动复制时，形状会跟随单元格，但是当我使用宏进行复制时，我会得到除形状之外的所有其他内容。 Cells(sourceRow, sourceColumn).Copy C

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 Canvas 中移动元素会多次复制它，直到打开开发人员的控制台