前台页面画椭圆，标记问题！！！求大神 指点 困惑，解脱人生！！

有些事努力无法达到 2017-07-25 11:34:51
开发一个项目 ，需要在页面的图纸上有瑕疵的或者有问题的地方，画椭圆标记出来 并且可以把每个椭圆标记顺序，请大神直接上代码！！不要建议我看什么插件或者别的，看了我也做不出来，我已经研究一个月了,。提示可以用raphael.js,h5的canvas，都可以，具体如图
...全文
613 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
jyc999 2017-08-09
  • 打赏
  • 举报
 回复
像你这种技术菜，还不按套路做事，没人愿意教你的。不是吃你饭的，给你引导一下就足够多了，你还臭不要脸的还要手把手教，你觉得你这点分配吗？还大言不惭的说别人教的没用。

傻逼！

shihun_feel 2017-07-27
  • 打赏
  • 举报
 回复
用fabric.js
var creat_mark=1;
var PI=301415926;
var circle1 = new fabric.Circle({
objectId: Date.now(),
name: "circle" + creat_mark,
data_i: creat_mark,
radius: 60,
fill: 'transparent',
stroke: '#3399ff',
scaleY: 1,//当打缩小当前的方向
scaleX: 1.5,
startAngle: 0,
endAngle: 8 * PI / 8,//角度
left: 100,
top: 100,
selectable: false,//禁止选择
hoverCursor:"default"//鼠标的样式
});
canv.add(circle1);
canv.renderAll();
console.log(canv.getObjects());//获取所有的元素的






这个是绑定文字和图形的方法，可以使园，椭圆、矩形
var rect1 = new fabric.Rect({
width: 110,
height: 60,
fill: "#ffffff",
stroke: "#3399ff"
});
var txt1 = new fabric.Text("按钮", {
fontSize: 30
});
var group1 = new fabric.Group([rect1, txt1], {
objectId: Date.now(),
name: "btn" + creat_mark,
pro_ul_li_click2: "",
pro_ul_li_mousedown2: "",
pro_ul_li_mouseup2: "",
btn_mark: "is_btn",
bind:true,
data_i: creat_mark,
left: _x,
top: _y,
scaleX: canvasScale,
scaleY: canvasScale
});
group1["name"] = "btn" + creat_mark;
arr_1.push(creat_mark);
canv.add(group1);



这个是添加图片的方法，可以是路径还可以是base64位的数据
fabric.Image.fromURL("../img/video_s.jpg", function (oImg) {
oImg.set({
objectId: Date.now(),
image_type: "video",
name: "video" + creat_mark,
data_i: creat_mark,
width: 160,
height: 90,
left: _x,
top: _y,
scaleX: canvasScale,
scaleY: canvasScale,
bind: true,
videos:[]
});
canv.add(oImg);

中间的属性可以自己添加定义，有些是官方的

缩放不好做，需要会计算，源码不能给你，这是公司的项目，不要指望别人给你写代码，人家也忙的

排序问题，canv.getObjects()可以获取所有的元素，椭圆有objectId属性，是根据时间做的，删除添加什么的，重新排个序，
我看了你的项目设计需求，不复杂，要求不高，我做的是画图软甲，图像都是可拖动的

有些事努力无法达到 2017-07-27
  • 打赏
  • 举报
 回复
引用 14 楼 weixin_37778143的回复:
[quote=引用 12 楼 shihun_feel的回复:]用fabric.js
var creat_mark=1;
var PI=301415926;
var circle1 = new fabric.Circle({
objectId: Date.now(),
name: "circle" + creat_mark,
data_i: creat_mark,
radius: 60,
fill: 'transparent',
stroke: '#3399ff',
scaleY: 1,//当打缩小当前的方向
scaleX: 1.5,
startAngle: 0,
endAngle: 8 * PI / 8,//角度
left: 100,
top: 100,
selectable: false,//禁止选择
hoverCursor:"default"//鼠标的样式
});
canv.add(circle1);
canv.renderAll();
console.log(canv.getObjects());//获取所有的元素的






这个是绑定文字和图形的方法，可以使园，椭圆、矩形
var rect1 = new fabric.Rect({
width: 110,
height: 60,
fill: "#ffffff",
stroke: "#3399ff"
});
var txt1 = new fabric.Text("按钮", {
fontSize: 30
});
var group1 = new fabric.Group([rect1, txt1], {
objectId: Date.now(),
name: "btn" + creat_mark,
pro_ul_li_click2: "",
pro_ul_li_mousedown2: "",
pro_ul_li_mouseup2: "",
btn_mark: "is_btn",
bind:true,
data_i: creat_mark,
left: _x,
top: _y,
scaleX: canvasScale,
scaleY: canvasScale
});
group1["name"] = "btn" + creat_mark;
arr_1.push(creat_mark);
canv.add(group1);



这个是添加图片的方法，可以是路径还可以是base64位的数据
fabric.Image.fromURL("../img/video_s.jpg", function (oImg) {
oImg.set({
objectId: Date.now(),
image_type: "video",
name: "video" + creat_mark,
data_i: creat_mark,
width: 160,
height: 90,
left: _x,
top: _y,
scaleX: canvasScale,
scaleY: canvasScale,
bind: true,
videos:[]
});
canv.add(oImg);

中间的属性可以自己添加定义，有些是官方的

缩放不好做，需要会计算，源码不能给你，这是公司的项目，不要指望别人给你写代码，人家也忙的

排序问题，canv.getObjects()可以获取所有的元素，椭圆有objectId属性，是根据时间做的，删除添加什么的，重新排个序，
我看了你的项目设计需求，不复杂，要求不高，我做的是画图软甲，图像都是可拖动的

要不帮我弄个简单的demo也行，你这都不全我不知道怎么弄，谢谢了，大兄弟！！卡着一个学了[/quote] 做了半天你那个都出来，但是和你图片不一样，希望加qq指导一下，麻烦了，还有是这些操作都是用户操作鼠标完成的。
有些事努力无法达到 2017-07-27
  • 打赏
  • 举报
 回复
引用 12 楼 shihun_feel的回复:
用fabric.js
var creat_mark=1;
var PI=301415926;
var circle1 = new fabric.Circle({
objectId: Date.now(),
name: "circle" + creat_mark,
data_i: creat_mark,
radius: 60,
fill: 'transparent',
stroke: '#3399ff',
scaleY: 1,//当打缩小当前的方向
scaleX: 1.5,
startAngle: 0,
endAngle: 8 * PI / 8,//角度
left: 100,
top: 100,
selectable: false,//禁止选择
hoverCursor:"default"//鼠标的样式
});
canv.add(circle1);
canv.renderAll();
console.log(canv.getObjects());//获取所有的元素的






这个是绑定文字和图形的方法，可以使园，椭圆、矩形
var rect1 = new fabric.Rect({
width: 110,
height: 60,
fill: "#ffffff",
stroke: "#3399ff"
});
var txt1 = new fabric.Text("按钮", {
fontSize: 30
});
var group1 = new fabric.Group([rect1, txt1], {
objectId: Date.now(),
name: "btn" + creat_mark,
pro_ul_li_click2: "",
pro_ul_li_mousedown2: "",
pro_ul_li_mouseup2: "",
btn_mark: "is_btn",
bind:true,
data_i: creat_mark,
left: _x,
top: _y,
scaleX: canvasScale,
scaleY: canvasScale
});
group1["name"] = "btn" + creat_mark;
arr_1.push(creat_mark);
canv.add(group1);



这个是添加图片的方法，可以是路径还可以是base64位的数据
fabric.Image.fromURL("../img/video_s.jpg", function (oImg) {
oImg.set({
objectId: Date.now(),
image_type: "video",
name: "video" + creat_mark,
data_i: creat_mark,
width: 160,
height: 90,
left: _x,
top: _y,
scaleX: canvasScale,
scaleY: canvasScale,
bind: true,
videos:[]
});
canv.add(oImg);

中间的属性可以自己添加定义，有些是官方的

缩放不好做，需要会计算，源码不能给你，这是公司的项目，不要指望别人给你写代码，人家也忙的

排序问题，canv.getObjects()可以获取所有的元素，椭圆有objectId属性，是根据时间做的，删除添加什么的，重新排个序，
我看了你的项目设计需求，不复杂，要求不高，我做的是画图软甲，图像都是可拖动的

要不帮我弄个简单的demo也行，你这都不全我不知道怎么弄，谢谢了，大兄弟！！卡着一个学了
有些事努力无法达到 2017-07-27
  • 打赏
  • 举报
 回复
引用 12 楼 shihun_feel的回复:
用fabric.js
var creat_mark=1;
var PI=301415926;
var circle1 = new fabric.Circle({
objectId: Date.now(),
name: "circle" + creat_mark,
data_i: creat_mark,
radius: 60,
fill: 'transparent',
stroke: '#3399ff',
scaleY: 1,//当打缩小当前的方向
scaleX: 1.5,
startAngle: 0,
endAngle: 8 * PI / 8,//角度
left: 100,
top: 100,
selectable: false,//禁止选择
hoverCursor:"default"//鼠标的样式
});
canv.add(circle1);
canv.renderAll();
console.log(canv.getObjects());//获取所有的元素的






这个是绑定文字和图形的方法，可以使园，椭圆、矩形
var rect1 = new fabric.Rect({
width: 110,
height: 60,
fill: "#ffffff",
stroke: "#3399ff"
});
var txt1 = new fabric.Text("按钮", {
fontSize: 30
});
var group1 = new fabric.Group([rect1, txt1], {
objectId: Date.now(),
name: "btn" + creat_mark,
pro_ul_li_click2: "",
pro_ul_li_mousedown2: "",
pro_ul_li_mouseup2: "",
btn_mark: "is_btn",
bind:true,
data_i: creat_mark,
left: _x,
top: _y,
scaleX: canvasScale,
scaleY: canvasScale
});
group1["name"] = "btn" + creat_mark;
arr_1.push(creat_mark);
canv.add(group1);



这个是添加图片的方法，可以是路径还可以是base64位的数据
fabric.Image.fromURL("../img/video_s.jpg", function (oImg) {
oImg.set({
objectId: Date.now(),
image_type: "video",
name: "video" + creat_mark,
data_i: creat_mark,
width: 160,
height: 90,
left: _x,
top: _y,
scaleX: canvasScale,
scaleY: canvasScale,
bind: true,
videos:[]
});
canv.add(oImg);

中间的属性可以自己添加定义，有些是官方的

缩放不好做，需要会计算，源码不能给你，这是公司的项目，不要指望别人给你写代码，人家也忙的

排序问题，canv.getObjects()可以获取所有的元素，椭圆有objectId属性，是根据时间做的，删除添加什么的，重新排个序，
我看了你的项目设计需求，不复杂，要求不高，我做的是画图软甲，图像都是可拖动的

加个qq细聊下呗，1071438948 答案 爸爸
有些事努力无法达到 2017-07-26
  • 打赏
  • 举报
 回复
引用 10 楼 jyc999的回复:
[quote=引用 9 楼 weixin_37778143 的回复:]
[quote=引用 8 楼 jyc999的回复:]<svg width="100%" height="100%"><ellipse cx="424" cy="188" stroke="#000000" fill="#3e71a0" stroke-width="1" rx="158.97798589741913" ry="67.97798589741913" /></svg>

把以上代码放到网页里面就可以看到一个椭圆

那这个怎么保存了？还有他可以在椭圆里面加123这样的顺序怎么加[/quote]

你这样会把一个问题衍生出源源不断的问题。我只是来回答提供画图的思路，剩下的靠脑子，多去找本JS书看看。
[/quote] 腦子是個好東西
jyc999 2017-07-26
  • 打赏
  • 举报
 回复
引用 9 楼 weixin_37778143 的回复:
[quote=引用 8 楼 jyc999的回复:]<svg width="100%" height="100%"><ellipse cx="424" cy="188" stroke="#000000" fill="#3e71a0" stroke-width="1" rx="158.97798589741913" ry="67.97798589741913" /></svg>

把以上代码放到网页里面就可以看到一个椭圆

那这个怎么保存了？还有他可以在椭圆里面加123这样的顺序怎么加[/quote]

你这样会把一个问题衍生出源源不断的问题。我只是来回答提供画图的思路，剩下的靠脑子，多去找本JS书看看。
有些事努力无法达到 2017-07-26
  • 打赏
  • 举报
 回复
引用 8 楼 jyc999的回复:
<svg width="100%" height="100%"><ellipse cx="424" cy="188" stroke="#000000" fill="#3e71a0" stroke-width="1" rx="158.97798589741913" ry="67.97798589741913" /></svg> 把以上代码放到网页里面就可以看到一个椭圆
那这个怎么保存了？还有他可以在椭圆里面加123这样的顺序怎么加
有些事努力无法达到 2017-07-25
  • 打赏
  • 举报
 回复
我想看代码，你说这些没啥意思
jio可 2017-07-25
  • 打赏
  • 举报
 回复
如果要标记绘图就要用到canvas了，先把图片绘制到canvas上面标记后记录坐标保存。查看的时候给句保存的数据绘制图像。
jyc999 2017-07-25
  • 打赏
  • 举报
 回复
<svg width="100%" height="100%"><ellipse cx="424" cy="188" stroke="#000000" fill="#3e71a0" stroke-width="1" rx="158.97798589741913" ry="67.97798589741913" /></svg> 把以上代码放到网页里面就可以看到一个椭圆
jyc999 2017-07-25
  • 打赏
  • 举报
 回复
<svg width="100%" height="100%"> <ellipse cx="424" cy="188" stroke="#000000" fill="#3e71a0" stroke-width="1" rx="158.97798589741913" ry="67.97798589741913" /> </svg> 这就是一个椭圆，画图代码不可能给你，可以开发js用鼠标画图的
有些事努力无法达到 2017-07-25
  • 打赏
  • 举报
 回复
引用 5 楼 weixin_37778143的回复:
[quote=引用 4 楼 weixin_37778143的回复:][quote=引用 3 楼 jyc999的回复:]


小意思 去看看svg
能给个代码吗谢谢您了[/quote] 帮忙写个代码，你上我看，我也写不出来啊[/quote] 我知道好多都能写出来，没用啊
有些事努力无法达到 2017-07-25
  • 打赏
  • 举报
 回复
引用 4 楼 weixin_37778143的回复:
[quote=引用 3 楼 jyc999的回复:]


小意思 去看看svg
能给个代码吗谢谢您了[/quote] 帮忙写个代码，你上我看，我也写不出来啊
有些事努力无法达到 2017-07-25
  • 打赏
  • 举报
 回复
引用 3 楼 jyc999的回复:



小意思 去看看svg
能给个代码吗谢谢您了
jyc999 2017-07-25
  • 打赏
  • 举报
 回复



小意思 去看看svg
PowerBI系列之SVG绘图专题
SVG矩形、圆形和椭圆3.      SVG线条和多边形4.      SVG文本和图片5.      SVG绘制路径6.      SVG其他知识7.      SVG动画基础8. &...
四心圆法画椭圆原理_四心圆法画椭圆的解析画法
四心圆法画椭圆的解析画法 本文 舟绍 一种 用解析 法 确定 四心 四的 圆心 位置 画椭 圆的方法 ．供 容器 设计 者及 制 图者 画椭 圆 时参考 ． 关键饲-竺燮 解析法画蚀 怖 溃 四 心圆法画椭 圆的几何画法是用作图法...
如何用turtle画椭圆?
问题：turtle工具中有circle(radius, extent=None, steps=None)方法画圆、圆弧、正多边形，但没有方法或函数能画椭圆，那椭圆该如何画呢？ 思想：当正多边形的边数n趋于无穷大的时候，所画出来的图形即为圆形。同理...
用python-turtle优雅的画椭圆
python-turtle库关于画圆问题第一次写博客用自带命令画圆利用圆的性质画圆画正多边形椭圆 第一次写博客 这是我第一次使用 CSDN 写博客，有问题请斧正。最近在做python课程开发，刚好利用python画圆作为讲解，在网上...
CAD椭圆怎么画？CAD椭圆绘制步骤
有些新手设计师在学习CAD制图的过程中，想要绘制椭圆却不知道怎么画，本篇CAD制图教程小编给大家整理了浩辰CAD软件中CAD椭圆的具体绘制步骤，不知道CAD椭圆怎么画的小伙伴抓紧看过来吧！ CAD椭圆绘制步骤： 1、启动...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章