溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用1天時間基于jquery與raphael實現了一個在線批閱的功能，目前功能比較簡單而且還有很多bug算是給有類似需求的兄弟們提供一個方向吧。該DEMO中具體實現了在線畫筆的功能。 以下是實際截圖 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="colorpicker.js"></script>
</HEAD>
<BODY>
<table>
<tr><td >DEMO:</td><td id="imgbox"><img src="demo.jpg" id="img" /></td></tr>
</table>
</BODY>
<script type="text/javascript">
$(function(){
var startPoint = {x:0,y:0};
var canDraw = false;
var pathStr = [];
$('#img').load(function() {
$('#img').hide();
var o = $('#img').offset();
var w = $('#img').width();
var h = $('#img').height();
var paper = Raphael("imgbox",w,h);
var p_w_picpath = paper.p_w_picpath($('#img').attr('src'),o.left, o.top,w,h);
var save = paper.path("M42.379,14.729 45.208,11.899 52.958,19.648 65.877,6.733 68.707,9.561 52.958,25.308z").attr({fill: "#fff", stroke: "none"}).glow({color:"#FF0"});
save.click(function(){
console.log(pathStr);
alert('save')
});
/*color picker*/
var picker = paper.path("M22.221,10.853c-0.111-0.414-0.261-0.412,0.221-1.539l1.66-3.519c0.021-0.051,0.2-0.412,0.192-0.946c0.015-0.529-0.313-1.289-1.119-1.642c-1.172-0.555-1.17-0.557-2.344-1.107c-0.784-0.396-1.581-0.171-1.979,0.179c-0.42,0.333-0.584,0.7-0.609,0.75L16.58,6.545c-0.564,1.084-0.655,0.97-1.048,1.147c-0.469,0.129-1.244,0.558-1.785,1.815c-1.108,2.346-1.108,2.346-1.108,2.346l-0.276,0.586l1.17,0.553l-3.599,7.623c-0.38,0.828-0.166,1.436-0.166,2.032c0.01,0.627-0.077,1.509-0.876,3.21l-0.276,0.586l3.517,1.661l0.276-0.585c0.808-1.699,1.431-2.326,1.922-2.717c0.46-0.381,1.066-0.6,1.465-1.42l3.599-7.618l1.172,0.554l0.279-0.589c0,0,0,0,1.105-2.345C22.578,12.166,22.419,11.301,22.221,10.853zM14.623,22.83c-0.156,0.353-0.413,0.439-1.091,0.955c-0.577,0.448-1.264,1.172-2.009,2.6l-1.191-0.562c0.628-1.48,0.75-2.474,0.73-3.203c-0.031-0.851-0.128-1.104,0.045-1.449l3.599-7.621l3.517,1.662L14.623,22.83z").attr({fill: "#ff0", stroke: "none"});
var cp = Raphael.colorpicker(600, 20, 200, "#ff0").onchange = function(color){
picker.attr('fill',color);
};
p_w_picpath.mousedown(function(e){
startPoint.x=e.offsetX;
startPoint.y=e.offsetY;
canDraw = true;
}).mousemove(function(e){
if (!canDraw) {return;};
var currentPath = {
x:startPoint.x,
y:startPoint.y,
tx:e.offsetX,
ty:e.offsetY
}
startPoint.x=e.offsetX;
startPoint.y=e.offsetY;
pathStr.push(Raphael.fullfill("M{x},{y}L{tx},{ty}",currentPath));
var path = paper.path(pathStr).attr({stroke: picker.attr('fill'),'stroke-width':5});
path.mouseup(function(event) {
canDraw = false;
});
}).mouseup(function(e) {
canDraw = false;
startPoint.x=e.offsetX;
startPoint.y=e.offsetY;
});;
});
});
</script>
</HTML>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
