HTML5 Canvas中可拖动，可伸缩的图像(Draggable, scalable image in HTML5 Canvas)

我正在使用一个我计划使用HTML5的小项目。到目前为止，我已经设法建立了一个带有一些小功能的小型演示，但它仍然缺乏必要的所有功能。 我希望这里的某个人可能有时间为初学者做些准备。

现在，正如你所看到的，图像(是的，它是一个图像，而不是一个绘制的对象，图像将为最终版本而改变，所以不要投入太多的东西)是可拖动的。 但我希望能够像这样快速调整图像大小： http ： //simonsarris.com/project/canvasdemo/demo2.html

任何想知道如何在我的演示中加入这个演示功能的人？

感谢所有投入。

I'm working with a little project that I'm planning on using HTML5 in. So far I've managed to set up a little demo with some small functionality, but it still lacks all functionality necessary. I hope that someone here might have some time to spare for a beginner.

Right now, as you can see, the image (yup, it's an image and not a drawn object, the image will change for the final version so don't put to much intot that) is draggable. But I would like to be able to resize the image on the fly like this: http://simonsarris.com/project/canvasdemo/demo2.html

Anyone that has an idea how to incorporate the functionality from this demo in mine?

All inputs are appreciated, thanks.

原文：https://stackoverflow.com/questions/5793852

更新时间：2020-01-02 23:58

最满意答案

我写了你正在看的演示

所以相关的drawImage看起来像这样：

context . drawImage(image, dx, dy, dw, dh)

这是目的地x，y，宽度和高度。 这意味着，无论原始图像的大小如何，您都可以将其绘制得更大或更小。 在我的框示例中，您可以更改fillRect的宽度和高度，而在此处您应该只更改drawImage的dw和dh值。

所以在你的transform.js文件的第32行，而不是150,150的dw,dh值，应该有相当于保存(和修改)的宽度和高度，就像在我的演示中一样。

其他一切(让把手工作等)应该是完全相同的。

如果还有任何问题，请告诉我！

I wrote the demo you were looking at

So the relevant drawImage looks like this:

context . drawImage(image, dx, dy, dw, dh)

That's destination x, y, width and height. That means, regardless of the size of the original image, you can draw it larger or smaller onto the canvas. In my box example you change the width and height of fillRect, instead here you should just be changing the dw and dh values of drawImage.

So on line 32 of your transform.js file, instead of 150,150 for the dw,dh values, there should be the equivalent of a saved (and modified) width and height, just like in my demo.

Everything else (getting the handles to work, etc) should be pretty much the same.

If there are still any questions, let me know!

相关问答

要完成此操作，您需要将画布上的width和height属性设置为1000和1000 。 这表示画布的原生大小。 然后，您可以使用CSS缩小画布以使其适合您的页面。 示例HTML：

示例CSS： theCanvas {

width: 500px;

height: 500px;

}

有关本机vs缩放画布大小调整的更多信息，请参阅此答案 。 To accomplis

...

我可能不明白你说的是什么，但尝试这个链接可能对你有用 I may not understand what u said but try this link may b useful for u

改变这个： wall1.onload = drawwall(arg1, arg2, arg3);

对此 wall1.onload = function() { drawwall(arg1, arg2, arg3); };

这是必要的，因为您需要为onload属性分配一个函数。 在错误的代码中，您分配了调用函数的结果。 Change this: wall1.onload = drawwall(arg1, arg2, arg3);

To this wall1.onload = function(

...

您正试图在回调中引用索引变量。 执行回调时，此变量的值超出了数组的范围： context.drawImage(tableImage[**i**], x, y);

您需要以另一种方式提取适用的图像元素： tableImage[i].onload = function (event) {

context.drawImage(event.target, x, y);

};

现在我注意到你的x和y坐标也在闭包中被引用。 这也行不通。 您需要将x和y存储为图像元素的属性或数据。 你可以这样做：

...

iOS的所有限制都是实际的： 对于小于256 MB RAM的设备，对于大于或等于256 MB RAM的设备， 解码的GIF，PNG和TIFF图像的最大尺寸为 3百万 像素;对于大于或等于256 MB RAM的设备， 最大尺寸为 500万像素 。 画布元素的最大尺寸为300万像素，对于256 MB RAM以下的设备和500万像素以上的设备，对于大于或等于256 MB RAM的设备。 每个顶级入口点的JavaScript执行时间限制为10秒。 这个限制不会抛出任何错误，所以你会尝试渲染或读取6MB的图

...

我写了你正在看的演示 所以相关的drawImage看起来像这样： context . drawImage(image, dx, dy, dw, dh) 这是目的地x，y，宽度和高度。 这意味着，无论原始图像的大小如何，您都可以将其绘制得更大或更小。 在我的框示例中，您可以更改fillRect的宽度和高度，而在此处您应该只更改drawImage的dw和dh值。 所以在你的transform.js文件的第32行，而不是150,150的dw,dh值，应该有相当于保存(和修改)的宽度和高度，就像在我的演示

...

您需要对代码进行一些更改，而不是立即将图像绘制到画布上，您需要跟踪所有丢弃的图像。 imagesOnCanvas将填充所有丢弃的图像。 var imagesOnCanvas = [];

function drop(e)

{

e.preventDefault();

var image = document.getElementById( e.dataTransfer.getData("image_id") );

var mouse_position_x = e.dataT

...

本文中的脚本使用静态图像，因为它的目标只是解释如何将画布导出到位图：) 我写了另一篇小文章，其中我描述了如何将N个图像从硬盘上传到画布(使用CreateJS)，这样你就可以看到加载动态源的过程并不那么难。 http://www.fabiobiondi.com/blog/2012/10/upload-images-from-the-user-hard-driveto-an-html5-canvas-easel-js-application/ 无论如何，如果你需要将图像加载到画布中，你可以简单地使用如

...

imageObj.src应该是一个相对路径。 例如，对于同一路径中的图像，如果像imageObj.src ='image1.jpg'那样; Path是相对于正在运行的html文件。 imageObj.src should be a relative path. For example to an image in the same path, if would be something like imageObj.src = 'image1.jpg'; Path is relative to th

...

既然你说你已经调整了亮度，听起来你需要的只是对比度调整算法这里是C＃方法的一个线程(看看更新2)，代码的逻辑是合理的，可以在任何程序中使用： 有效地调整C＃中图像的对比度 - Stack Overflow Since you said you already adjusted the brightness and it sounds like all you need is the algorithm for contrast adjusting here's a thread for a C#

...