ID를 기반으로 캔버스를 로컬로 다운로드

저는이 문제를 잠시 동안 풀려고했는데 기본적으로 할 수없는 일은 kinetic js를 사용하는 캔버스에 ID를 추가하는 것입니다. 요소를 검사 할 때 코드를 조작하십시오. 누구든지이 코드가 내 캔버스에 ID를 적용하지 않는 이유에 대해 어떤 생각을 가지고 있습니까?ID를 기반으로 캔버스를 로컬로 다운로드

$(function() { 
$('.kineticjs-content canvas').id = 'somename'; 
});

모든 도움을 주시면 감사하겠습니다.

멜리사

출처

2013-12-19 Melissa Boyle

KineticJS는 실제로 2 개의 HTML 캔버스를 생성합니다.

하나의 캔버스가 히트 테스트에 사용됩니다 (내부 용).

하나의 캔버스가 장면을 그리는 데 사용됩니다 (원하는 장면).

장면 캔버스에 대한 참조를 가져와 ID를 설정하려면, 당신은이 작업을 수행 할 수 있습니다

var htmlCanvas = myLayer.getContext()._context.canvas; 

htmlCanvas.id="gotcha"; 

console.log(htmlCanvas);

다음 예제 코드와 바이올린이야 [추가 데모] http://jsfiddle.net/m1erickson/LmCgw/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 

<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var myLayer = new Kinetic.Layer(); 
    stage.add(myLayer); 

    // get the Scene (html canvas) from KineticJS myLayer 

    var htmlCanvas=myLayer.getContext()._context.canvas; 

    // assign an id to that html canvas 

    htmlCanvas.id="gotcha"; 


    // get a reference to the html canvas with id of "gotcha" 

    var canvas=document.getElementById("gotcha"); 
    var context=canvas.getContext("2d"); 

    // draw something on the regular html canvas (outside KineticJS) 

    context.beginPath(); 
    context.arc(100,100,20,0,Math.PI*2); 
    context.closePath(); 
    context.fillStyle="skyblue"; 
    context.strokeStyle="gray"; 
    context.lineWidth=3; 
    context.fill(); 
    context.stroke(); 

}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

출처

2013-12-19 17:51:38 markE

답장을 보내 주셔서 감사합니다. '레이어가 정의되지 않았습니다'오류가 발생합니다. 내 레이어의 이름, 아이디어가 무엇입니까? 다시 한 번 감사드립니다 –

예를 들어 당신을 보았습니다. :) – markE

이 마크는 시간 내 주셔서 감사합니다.하지만 제 생각에는 그것을 작동시킬 수없는 것처럼 보입니다. 그것에서, 어딘가 바보 같아. 다시 한 번 감사드립니다 http://jsfiddle.net/FT26S/ –

$()에 의해 반환되는 값이 jQuery를 객체가 아닌 요소이기 때문에이 작동하지 않는 이유는.

당신은 당신의 경우에,이 일을해야하므로, 배열 액세스 표기법을 사용하여 jQuery 오브젝트에서 개별 요소에 액세스 할 수 있습니다

$('.kineticjs-content canvas')[0].id = 'somename';

(또는 사용은 $(...).attr('id', 'whatever')도 작동한다) 만들 때

출처

2013-12-19 11:04:33

안녕하세요 Jani, 도와 주셔서 감사합니다. 내가 제안한 것을 할 때 다음 오류 : 잡히지 않은 TypeError : 정의되지 않은 'id'속성을 설정할 수 없습니다. –

ID를 기반으로 캔버스를 로컬로 다운로드

답변

관련 문제