首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用JS在图像上绘制可写矩形

如何使用JS在图像上绘制可写矩形
EN

Stack Overflow用户
提问于 2022-06-12 20:25:59
回答 2查看 48关注 0票数 -1

活工作表是一个供学生和教师使用的网站,教师可以上传带有问题的文件,然后在上传完这些问题后,将这个文件发送给学生,当然是-without答案--回答它。老师可以用很多方法来解决这些问题,但对我来说最重要的是,老师可以在图像上画长方形,然后在上面写答案。

我的问题是:如何使用javascript在图像上绘制可写矩形?

为了清晰起见,请参阅演示

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-06-15 11:00:14

最后,经过长时间的搜索,我找到了Fabric.js,下面是我的代码示例

代码语言:javascript
代码运行次数:0
运行
复制
let fabricCanvas = new fabric.Canvas('your-canvas-id');

// You can change the canvas size via the next two lines
fabricCanvas.setHeight(document.getElementById('your-image').height);
fabricCanvas.setWidth(document.getElementById('your-image').width);

fabric.Image.fromURL(document.getElementById('your-image').src, function (img) {
    let textBox = new fabric.Textbox("Enter Your Answer", {
            fontSize: 16,
            fontFamily: 'Arial',
            textAlign: 'left',
            width: 180,
            top: 0,
            left: 0,
        });

    fabricCanvas.add(img.set({ left: 0, top: 0 }));
    fabricCanvas.add(textBox);
});
票数 0
EN

Stack Overflow用户

发布于 2022-06-12 20:40:33

Konva js是个不错的选择。

https://konvajs.org/

此工具允许您创建形状,并将所有内容保存到数据库中,以便将所有绘图重新加载到将来的使用中。

很好的尝试

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72595635

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档