キャンバスへのdiv(ドロップダウンとして取得)のコードを取得したが、PC(ユーザーシステム) to canvas 誰でも私を助けてくれませんか?
ここに私がこれまでに行ったコードがあります
var js_c_drawing, activeObject = null;
$(document).ready(function () {
setDrawingCanvasCoords();
js_c_drawing = new fabric.Canvas('c_drawing');
js_c_drawing.calcOffset();
if (typeof fabric.instances != "undefined") fabric.instances.push(js_c_drawing);
});
function setDrawingCanvasCoords() {
var wHeight = $(window).height() - 100;
var wWidth = $(window).width() - 164;
var drawingStyle = 'border:4px solid gray;top:20px;position:relative;background-color:black;' + 'width:' + wWidth + 'px; height:' + wHeight + 'px';
$("#divDrawing").attr('style', drawingStyle);
}
function showToolMenu(shapeMenu) {
var divShapesId = 'divShapes';
var divElement = $('#' + divShapesId);
var ele = document.getElementById('a' + shapeMenu);
elePosition = findPos(ele);
document.getElementById(divShapesId).style.left = elePosition[0] + 'px';
document.getElementById(divShapesId).style.top = elePosition[1] + (ele.offsetHeight) + 'px';
document.getElementById(divShapesId).style.zIndex = 100;
divElement.show();
var url = baseurl + shapeMenu;
$(divElement).load(url);
}
function hideToolMenu() {
var divShapesId = 'divShapes';
var divElement = $('#' + divShapesId);
document.getElementById(divShapesId).style.zIndex = 20;
divElement.hide(2000);
}
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft, curtop];
}
私はすでにhttp://www.html5rocks.com/en/tutorials/file/dndfiles/これを使用しようとしましたが、画像サイズなどが表示されており、http://jsfiddle.net/natchiketa/w8kkc/このコードを試しましたPC(ユーザーシステム)とcanvasでやってみましたがうまくいきませんでした。