jQuery ClickableCanvas デモページ2

jQuery ClickableCanvasの使い方

それぞれの図形でドラッグアンドドロップができます。Chromeだと星型図形が真っ黒に塗りつぶされてしまいますが、ぼかし（shadowBlurなど）をなくすと透明に戻ります。　ClickableCanvas.js ver 1.4

サンプルのコード詳細 $(function() { /* Canvas要素を作成する親要素を指定 */ var cc = $('#canvas_area').clickableCanvas({ uuCanvas: true }); var draggable1 = false, x1 = 0, y1 = 0, preX1 = 0, preY1 = 0; cc.createShape({ name: 'hoge', type: 'line', coords: [ { x: 300, y: 150 }, { x: 280, y: 250 }, { x: 380, y: 350 }, { x: 250, y: 450 } ], attr: { shapeZIndex: 5 }, style: { lineWidth: 3.0, strokeStyle: '#333', shadowBlur: 3, shadowColor: '#000' }, hoverStyle: { lineWidth: 3.0, strokeStyle: '#F00', shadowBlur: 3, shadowColor: '#000' }, onMouseMove: function(shape, coord) { x1 = coord.x; y1 = coord.y; if (preX1 == x1 && preY1 == y1) return; if (draggable1) { for (var i = 0, len = shape.coords.length; i < len; i++) { shape.coords[i].x += (x1 - preX1); shape.coords[i].y += (y1 - preY1); } } preX1 = x1; preY1 = y1; }, onMouseDown: function(shape, coord, topmostShape) { if (topmostShape == shape.name) draggable1 = true; }, onClick: function(shape, coord) { draggable1 = false; } }); var draggable2 = false, x2 = 0, y2 = 0, preX2 = 0, preY2 = 0; cc.createShape({ name: 'fuga', type: 'arc', coords: { x: 450, y: 220, r: 80, start: 260, add: -250, anticlockwise: true }, attr: { shapeZIndex: 10, }, style: { lineWidth: 2.0, strokeStyle: '#6B8E23', fillStyle: '#9ACD32', shadowBlur: 3, shadowColor: '#000' }, hoverStyle: { lineWidth: 2.0, strokeStyle: '#2E8B57', fillStyle: '#98FB98', shadowBlur: 3, shadowColor: '#000' }, onMouseMove: function(shape, coord) { x2 = coord.x; y2 = coord.y; if (preX2 == x2 && preY2 == y2) return; if (draggable2) { shape.coords.x += (x2 - preX2); shape.coords.y += (y2 - preY2); } preX2 = x2; preY2 = y2; }, onMouseDown: function(shape, coord, topmostShape) { if (topmostShape == shape.name) draggable2 = true; }, onClick: function(shape, coord) { draggable2 = false; } }); var draggable3 = false, x3 = 0, y3 = 0, preX3 = 0, preY3 = 0; cc.createShape({ name: 'hogefuga', type: 'polygon', coords: [ { x: 150, y: 0 }, { x: 188, y: 110 }, { x: 304, y: 110 }, { x: 210, y: 180 }, { x: 246, y: 288 }, { x: 150, y: 220 }, { x: 58, y: 288 }, { x: 94, y: 180 }, { x: 0, y: 110 }, { x: 116, y: 110 } ], attr: { shapeZIndex: 15 }, style: { lineWidth: 3.0, strokeStyle: '#00BFFF', shadowBlur: 3, shadowColor: '#000' }, hoverStyle: { lineWidth: 3.0, strokeStyle: '#00FFFF', shadowBlur: 3, shadowColor: '#000' }, onMouseMove: function(shape, coord) { x3 = coord.x; y3 = coord.y; if (preX3 == x3 && preY3 == y3) return; if (draggable3) { for (var i = 0, len = shape.coords.length; i < len; i++) { shape.coords[i].x += (x3 - preX3); shape.coords[i].y += (y3 - preY3); } } preX3 = x3; preY3 = y3; }, onMouseDown: function(shape, coord, topmostShape) { if (topmostShape == shape.name) draggable3 = true; }, onClick: function(shape, coord) { draggable3 = false; } }); });

動作確認：　Firefox3.6 Chrome6.0 IE8